1、命名视图
routes:[ { path:'/',components:{ default:header, 'left':leftBox, 'main':mainBox } } ]
2、案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cdn镜像快速导入Vue包-->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>
<style>
.header{
background-color: orange;
height: 80px;
}
.container{
display: flex;
height: 700px;
}
.left{
background-color: lightblue;
flex: 2;
}
.main{
background-color: lightpink;
flex: 8;
}
</style>
</head>
<body>
<div id="app">
<router-view ></router-view>
<div class="container">
<!-- 一个router-view占用一个组件的视图-->
<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">mian部区域</h1>'
}
var router = new VueRouter({
routes:[
{
path:'/',components:{
default:header,
'left':leftBox,
'main':mainBox
}
}
]
})
//2.创建一个vue实例
var vm = new Vue({
el: '#app', //表示当前我们new的这个Vue实例，要控制页面上的哪个区域
data: { //data属性中存放的是el中要用到的数据
msg: '欢迎学习Vue' //通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序
},
router
})
</script>
</body>
</html>