官网地址：https://router.vuejs.org/zh-cn/essentials/nested-routes.html
路由嵌套一般使用在后台管理系统中
给一个比较简单的小案例
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
<style>
.layout {
width: 600px;
margin: 100px auto;
} .left {
width: 200px;
height: 500px;
float: left;
border: 1px solid red;
} .right {
width: 380px;
height: 500px;
float: right;
border: 1px solid green;
} .top {
height: 100px;
border: 1px solid black;
}
</style>
</head>
<script type="text/html" id="templateId">
<div class="layout">
<div class="left">左边菜单<br/><br/>
<router-link to="/menu1/login">登录组件</router-link><br/><br/>
<router-link to="/menu1/register">注册组件</router-link>
</div>
<div class="right">
<div class="top">
顶部内容
</div>
<div class="content">
<br/>
<router-view></router-view>
</div>
</div>
</div>
</script> <body>
<div id="app">
<router-link to="/menu1">菜单1</router-link>
<router-link to="/menu2">菜单2</router-link> <router-view></router-view>
</div>
</body>
<script>
//1、注册组件
const menu1 = {
template:"#templateId"
} const menu2 = {
template:'<div>我是菜单2</div>'
} const login = {
template:'<div>我是登录组件</div>'
} const register = {
template:'<div>i am register components</div>'
} //2、创建路由对象，设置路由规则
const router = new VueRouter({
routes:[
{
path:'/menu1',
component:menu1,
children:[
{path:'login',component:login},
{path:'register',component:register}
]
},
{
path:'/menu2',
component:menu2
}
]
}) new Vue({
el: "#app",
router
})
</script> </html>