经典布局:header、aside、main。左侧固定,右侧自适应,这里我用的是flex布局
主要是考察css和vue路由
html,
body {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
#app {
height: 100%;
overflow: hidden;
}
.header {
height: 100px;
background-color: lightsalmon;
}
.container {
height: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
}
.aside {
width: 200px;
background-color: lightyellow;
}
.main {
flex-grow: 1;
background-color: linen;
}
<div id="app">
<router-view></router-view>
<div class="container">
<router-view name="aside"></router-view>
<router-view name="main"></router-view>
</div>
</div>
<script src="./lib/vue@2.6.10.js"></script>
<script src="./lib/vue-router-3.0.1.js"></script>
<script>
let header = {
template: '<div :class="{header:true}">头部区域</div>'
}
let aside = {
template: '<div :class="{aside:true}">侧边栏区域</div>'
}
let main = {
template: '<div :class="{main:true}">主体区域</div>',
}
let router = new VueRouter({
routes: [
{
path: '/',
// components命名视图组件,你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。
components: {
default: header,
aside,
main
}
},
]
})
const vm = new Vue({
el: '#app',
data: {},
router
})
</script>