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>