子路由嵌套子路由
第一级子路由 Main.vue
<template> <div style="border:1px solid #333;padding:20px 50px;margin:20px 0px;"> 这是一级路由 <router-view></router-view> </div> </template> <script> export default { data () { return { } } } </script>
第二级子路由 home.vue
<template> <div style="border:1px solid #333;padding:20px 50px;margin:20px 0px;"> 这是二级路由 <router-view></router-view> </div> </template> <script> export default { data() { return {}; } } </script>
第三级子路由 hello.vue
<template> <div style="border:1px solid #333;padding:20px 50px;margin:20px 0px;"> 这是三级路由 <router-view></router-view> </div> </template> <script> export default { data() { return {}; } } </script>
router里的路由配置
import Vue from 'vue' import Router from 'vue-router' // import Main from '@/components/HelloWorld' Vue.use(Router) export default new Router({ routes: [ { path: '/', redirect: '/home' }, { path: '/main', //第一级子路由的可以单是 '/'这样访问路径里可以没有‘/main’ name: 'Main', component: resolve => require(['../components/Main.vue'], resolve), meta: { title: '第一级子路由' }, children: [ { path: 'home', name: 'Home', component: resolve => require(['../components/home/home.vue'], resolve), meta: { title: '第二级子路由' },
redirect: '/main/home/hello', children: [ { path: 'hello', name: 'Hello', component: resolve => require(['../components/home/hello.vue'], resolve), meta: { title: '第三级子路由' } } ] } ] }, { path: '/login', name: 'Login', component: resolve => require(['../components/Login.vue'], resolve) } ] })