vue学习笔记：7.4.路由-命名视图实现经典布局

路由-命名视图实现经典布局

效果图

引入包

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

CSS

<style>
*{
margin: 0;
padding:0;
box-sizing: border-box;
}
html,body{
width: 100%;
height: 100%;
}
#app{
width: 100%;
height: 100%;
padding: 10px;
}
.header{
width: 100%;
height: 80px;
background-color: orange;
}
.container{
display: flex;
height: calc(100% - 90px);
padding: 0;
margin-top: 10px;
}
.left{
flex: 2;
background-color: lightgreen;
}
.main{
flex: 8;
background-color: lightcoral;
}
</style>

HTML

<div id="app">
<router-view></router-view>
<div class="container">
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
</div>

JS

<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 routerObj = new VueRouter({
routes: [
{
path: "/",
components: {
"default": header,
"left": leftBox,
"main": mainBox
}
}
]
})

var vm = new Vue({
el: '#app',
data: {

},
router: routerObj,
methods: {

}
});
</script>