vue-router多级路由

多级路由的页面配置需要使用children属性

两层嵌套：

import Vue from "vue";
import Router from 'vue-router'

Vue.use(Router);

const constantRouterMap = [
    // 重定向
    {
        path: '/',
        redirect: '/index',
    },
    {
        path: '/index',
        component:() => import('../src/components/index/index.vue'), 
        children: [{
            path: '/children',   //这里的路径加了/
            name:'children',
            component:() => import('../src/components/index/children/index.vue'),
            props: true,
        }]
    },
    {
        path: '/generator',
        name: 'gengrator',
        component:() => import('../src/components/generator/generator.vue'),
        redirect:'login',
        children:[{
            path:'/login',
            name:'login',
            component:()=>import('../src/components/generator/login/login.vue')
        }]
    }

]
const router = new Router({
    routes: constantRouterMap,
    mode: 'history'
});
export default router

 然后在index.js页面中调用

<router-link to="children">切换咯</router-link>  //注意这里的children 没有加/
<router-view></router-view>

设置默认路由

 

如果需要将children/index.vue设置成为默认的子页面则在router.js中使用redirect属性

{
        path: '/index',
        component:() => import('../src/components/index/index.vue'), 
        redirect:'children', //关键代码
        children: [{
            path: '/children',
            name:'children',
            component:() => import('../src/components/index/children/index.vue'),
            props: true,
        }]
    },

 

多级页面也使用如上方法调用。

跳转方式有两种：

一个是直接在根路径下跳转，上面介绍的方法就是直接在根路径下跳转

一个则是父组件的路径下。

{
        path: '/index',
        component:() => import('../src/components/index/index.vue'), 
        children: [{
            path: 'children',   //注意这里的path没有加/
            name:'children',
            component:() => import('../src/components/index/children/index.vue'),
            props: true,
        }]
    },

 

<router-link to="/index/children">切换咯</router-link>  //在父组件的路径下跳转
<router-view></router-view>