路由是什么
vue中的路由是用来管理页面切换或跳转的一种方式。Vue Router是vue官方的路由管理器
1. Vue Router的安装(需要先弄好npm)
npm install vue-router@4 -s
在安装完成之后,开始尝试简单的使用
例如现在你有随便的两个vue文件,你可以通过在app组件中使用router-link标签在两个组件中转换(这里不展开细说,很简单的)
2. 在vue3中使用路由
在main.js中编写代码
// 引入的工厂函数
import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHashHistory } from 'vue-router'
//这两个都需要导入
import demo1 from './components/demo1.vue'
import demo2 from './components/demo2.vue'
//这里是我自己写的两个组件
const app = createApp(App)
const routes = [
{ path: '/', component: demo1 },
{ path: '/2', component: demo2 }
]
//上面的定义path是导航的地址,就是要跳转的地址,componment是需要展示的组件
//这一步是创建路由
const router = createRouter({
history: createWebHashHistory(),
routes: routes
})
app.use(router)
// 挂载
app.mount('#app')
在定义好路由之后,我们需要知道组件会被渲染在哪里,这时就要用到路由出口
<template>
<!-- 出口,与地址对应的组件会被渲染在这里 -->
<router-view></router-view>
</template>
<script>
export default {
name: 'App',
}
</script>
此时你可以修改地址栏的地址,来切换两个组件,默认会访问path为’/'的组件
3.路由嵌套
在上面的例子中,我们会将两个不同的组件匹配到不同的路由,但是会在同一个地方被渲染,这种路由被称为顶级路由,但当你所渲染的组件自身(如上面的demo1或demo2)也包含路由时,就需要用到路由嵌套了
例如在demo2中包含一个demo3的出口
此时你需要在dmeo2中添加router-view标签
这是后面demo3会渲染的位置
现在需要考虑的是如何让给demo3匹配一个路由
我们可以在main.js中修改一下定义的routes
const routes = [
{ path: '/', component: demo1 },
{ path: '/2',
component: demo2,
children:[
{ path:'3',component: demo3}
//记得导入demo3
]
}
]
此时在地址栏修改地址为’/2/3’,就可以看到已经渲染demo3的dmeo2组件