项目结构
└─src
├─assets
├─components
├─plugins
├─routet
└─views
└─home
└─hello
在routet文件中配置二级路由
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: () => import('../views/home') //根vue所在的位置
},
{
path: '/home',
component:()=>import("../views/home"), //配置二级路由所在的目录
children: [
{
path:'', //前面不能加 /
component:()=>import('../views/home/HelloWorld') //二级路由首页
},
{
path:'hello', //前面不能加 /
component:()=>import('../views/home/hello') //配置
}
]
}
]
})
二级路由的component所标注的文件夹位置必须是对应一级路由的index.vue文件所在的文件夹,二级路由的具体映射必须是二级路由component下的子文件夹,里面的index.vue文件为具体的二级路由的映射文件
例如以下配置是不行的
export default new Router({
routes: [
{
path: '/',
component: () => import('../views') //一级路由
},
{
path: '/home',
component:()=>import("../views/home"), //二级路由与对应的一级路由不是子父级目录
children: [
{
path:'hello', //前面不能加 /
component:()=>import('../views/home/hello') //
}
]
}
]
})
使用二级路由
在一级路由的index.vue文件中使用router-view标签即可
<router-view></router-view>
当一级路由的index.vue中调用对应的二级路由中的地址时,相应的页面会加载到router-view标签中
例如
<v-btn :to="/home/hello"></v-btn>