Vue 路由
嵌套路由
在路由里面嵌套他的子路由，其关键属性时 children，children 也是路由的一种，它可以像 routes 一样去配置路由数组。每个字路由里面可以嵌套多个组件。子组件又有路由导航和路由容器。
<router-link to="/父路由/子路由"></router-link>
使用 children 实现子路由时，子路由的 path 不带 ‘/‘，否则会永远以根路径开始请求，不方便用户去理解 URL 地址
var router = new VueRouter({
routes: [
{
path: ‘/home‘,
component: home,
},
children: [
{ path: ‘login‘, component: login },
{ path: ‘register‘, component: register }
]
}
]
})
嵌套路由案例
<body> <div id="app"> <ul> <router-link to="/about" tag="li">关于公司</router-link> <router-link to="/contact" tag="li">联系我们</router-link> </ul> <router-view></router-view> </div> </body> <template id="about-tmp"> <div class="about-detail"> <h1>北京 XX 科技有限公司</h1> <router-link to="/about/detail">公司简介</router-link> | <router-link to="/about/governance">公司治理</router-link> <router-view></router-view> </div> </template> <template id="contact-tmp"> <div class="about-detail"> <h1>联系我们</h1> <p> 公司位于北京市海淀区中关村科技园内，主营业务包括餐饮娱乐，服装设计等 </p> </div> </template> <script> // 组件的模板对象 var about = {template: ‘#about-tmp‘} var contact = {template: ‘#contact-tmp‘} // 子路由组件模板对象 var detail = { template: ‘<p>xx 是全球领先......</p>‘ } var governance = { template: ‘<p>公司坚持以客户为中心，以奋斗为本......</p>‘ } var router = new VueRouter({ routes: [ // 父路由 path 属性 要加 ‘/‘ {path: ‘/‘, redirect: ‘/about‘}, // 路由重定向 { path: ‘/about‘, component: about, // 子路由 path 属性不加 ‘/‘ children: [ {path: ‘detail‘, component: detail}, {path: ‘governance‘, component: governance} ] }, {path: ‘/contact‘, component: contact} ] }) var vm = new Vue({ el: ‘#app‘, router // 挂载路由 }) </script> <style> ul, li, h1 { padding: 0; margin: 0; list-style: none } #app { width: 100%; display: flex; flex-direction: row; } ul { width: 200px; flex-direction: column; color: #fff; } li { flex: 1; background: #000; margin: 5px auto; text-align: center; line-height: 30px; } .about-detail { flex: 1; margin-left: 30px; } .about-detail h1 { font-size: 24px; color: blue; } </style>