实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件 。我们以品字布局为例讲解：
<!--
* @Author: [jsh]
* @Date: 2021-10-13 16:04:57
* @LastEditors: [jsh]
* @LastEditTime: 2021-10-14 11:20:06
* @Description:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue路由模板</title>
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<style>
header{
height: 50px;
background-color: teal;
}
main{
display: flex;
}
.left{
width: 150px;
border: 3px solid orange;
height: 700px;
margin: 10px 10px 0 0;
}
.right{
/* flex: 1; */
width: calc(100% - 150px);
border: 3px solid blue;
height: 700px;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="app">
<header>我是网站头部</header>
<main>
<div class="left">
<router-link to="/user">用户管理</router-link><br>
<router-link to="/student">学生管理</router-link><br>
<router-link to="/class">班级管理</router-link>
</div>
<div class="right">
<!-- 跳转路由的显示区域 -->
<!-- 为组件加载提供容器/窗口 -->
<!-- 实现了组件之间的动态加载 -->
<router-view></router-view>
</div>
</main>
<!-- 为组件加载 -->
<!-- 实现组件之间的动态加载 -->
<router-view></router-view>
</div>
<script>
//1.组件定义
let com1={
data(){
return {}
},
template:`
<div>
用户管理
</div>
`,
}
let com2={
data(){
return {}
},
template:`
<div>
学生管理
<div>
<router-link to="/student/grade">成绩管理</router-link>
<router-link to="/student/register">学籍管理</router-link>
</div>
<router-view></router-view>
</div>
`,
}
let com3={
data(){
return {}
},
template:`
<div>
班级管理
</div>
`,
}
let comGrade={
data(){
return {}
},
template:`
<div>
成绩管理
</div>
`,
}
let comRegister={
data(){
return {}
},
template:`
<div>
学籍管理
</div>
`,
}
//2.路由定义
let router=new VueRouter({
routes:[
{path:'/user',component:com1},
{
path:'/student',
component:com2,
children:[
{path:'grade',component:comGrade},
{path:'register',component:comRegister}
]
},
{path:'/class',component:com3},
]
})
let vm =new Vue({
el:'#app',
data:{},
methods:{},
//3.路由组件注册
router:router
})
</script>
</body>
</html>记得要引入router和vue文件 可以本地引入，也可以在线引入
我这里是本地引入 也可以去bootcdn去查找文件