多级路由的页面配置需要使用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>