版权声明:未经同意,不得随意转载转载 https://blog.csdn.net/lucky541788/article/details/83111451
css
h1, body {
margin: 0;
padding: 0;
}
.header {
background-color: orange;
height: 80px;
}
.container {
display: flex;
height: 700px;
}
.left {
background-color: lightgreen;
flex: 2;
}
.main {
background-color: lightpink;
flex: 8;
}
html
<div id="app">
<router-view name="default" class="header"></router-view>
<div class="container">
<router-view name="left" class="left"></router-view>
<router-view name="main" class="main"></router-view>
</div>
</div>
js
let header = {
template: '<h1>Header 头部区域!</h1>'
};
let leftbox = {
template: '<h1>Left 侧边栏区域!</h1>'
};
let mainbox = {
template: '<h1>main 主体区域!</h1>'
};
let router = new VueRouter({
routes: [
{
// 原来是 component,一个路径只能存放一个组件,现在 components 一个
// 路径可以存放多个组件,再在上面的 router-view 中名字引用不同组件即可
path: '/', components: {
default: header,
left: leftbox,
main: mainbox
}
},
]
});
let vm = new Vue({
el: '#app',
data: {},
methods: {},
router
});