路由的嵌套就是点击一个路由地址后，继续点击，进入到另外一个路由地址下，即第二个路由就是第一个路由的子路由。
根据我们前面学习的VueRouter的知识，可以直接写出代码来实现：
一般写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/account">account</router-link>
<router-view></router-view>
</div>
<template id="temp">
<div>
<h1>Account组件</h1>
<router-link to="/account/login">登录</router-link>
</div>
</template>
<script>
var account = {
template:'#temp',
}
var router = new VueRouter({
routes:[
{
path:'/account',component:account},
]
})
new Vue({
el:'#app',
data:{
},
methods: {
},
router
})
</script>
</body>
</html>
点击account—路由跳转到/account下：
再点击登录，跳转至/account/login：
改进写法
我们发现login路由是account路由下的一个子路由，形成了一个父子组件路由。VueRouter提供给我们一个属性== children ==来是实现路由的嵌套：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/account">account</router-link>
<router-view></router-view>
</div>
<template id="temp">
<div>
<h1>这是Account组件</h1>
<router-link to="/account/login">登录</router-link>
<router-link to="/account/register">注册</router-link>
<router-view></router-view>
</div>
</template>
<script>
var account={
template:'#temp'
}
var login={
template:'<h1>登录的组件显示</h1>'
}
var register={
template:'<h1>注册的组件显示</h1>'
}
var router=new VueRouter({
routes: [
{
path:'/account',
component:account,
children:[
{
path:'login',component:login},
{
path:'register',component:register}
]
},
]
})
var vm=new Vue({
el:'#app',
data:{
},
methods: {
},
router
})
</script>
</body>
</html>
点击account，跳转到子路由login中：
再分别点击子路由，进入到子路由下：
注意
使用children属性实现子路由时，子路由path前面 不能带/，以/ 开头的嵌套路径会被当作根路径否则会永远以根路由开始请求, 这样不方便我们调用渲染数据
应用— 实现一个经典布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/vue-2.4.0.js"></script>
<script src="lib/vue-router-3.0.1.js"></script>
<style>
html,body{
margin: 0;
padding: 0;
}
.header{
background-color: orange;
height:80px;
}
h1{
margin: 0;
padding: 0;
font-size: 16px;
}
.container{
display: flex;
height: 600px;
}
.left{
background-color: lightgreen;
flex: 2;
}
.main{
flex: 8;
background-color: lightpink;
}
</style>
</head>
<body>
<div id="app">
<router-view></router-view>
<div class="container">
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
</div>
<script>
var header={
template:'<h1 class="header">Header头部区域</h1>'
}
var leftBox={
template:'<h1 class="left">Left侧边栏区域</h1>'
}
var mainBox={
template:'<h1 class="main">mainBox主体内容</h1>'
}
var router=new VueRouter({
routes: [
{
path:'/',
components:{
'default':header,
'left':leftBox,
'main':mainBox
}
}
]
})
var vm=new Vue({
el:'#app',
data:{
},
methods: {
},
router
})
</script>
</body>
</html>
