vue_vue-router二级路由

项目结构

└─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>