要点:
1.router-view头部,侧边栏,主体内容区域三个区域,每个有一个占位符。
2.占位符定义一个name属性,跟components的第一个属性对应,这里component使用复数,同一个路由下匹配多个组件。
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
<script src="../lib/vue-router.js"></script>
<style>
.header{
margin-top: 25px;
background-color: gray;
height: 125px;
}
.container{
display:flex;
/*flex左右布局,一共十份,bootstrap的栅格12份*/
height: 575px;
}
.left{
background-color: gainsboro;
flex: 2.5;
}
.main{
background-color: honeydew;
flex: 7.5;
}
h1{
padding: 0px;
margin: 0px;
}
</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>
<!--头部,侧边栏,主体内容区域三个区域,每个有一个占位符-->
<!--name是为了将components中的多个组件一一对应起来-->
</div>
<script>
var header = {
template: '<h1 class="header">head头部区域</h1>'
};
var leftNav = {
template: '<h1 class="left">left侧边栏</h1>'
};
var mainContent = {
template: '<h1 class="main">main主体内容</h1>'
};
var router = new VueRouter({
routes:[
{path:'/', components:{
default:header,
'left':leftNav,
'main':mainContent
}}
//这里使用复数components,第一个属性与router-view中的name对应,第二个是表示要展示的组件名字
]
});
var vm = new Vue({
el:'#app',
router
});
</script>
</body>
</html>
效果: