<style>
body,div,h1{
padding:0;
margin:0;
}
.header{
background: red;
}
.container{
display:flex;
height:600px;
}
.left{
background: green;
flex:2;
}
.right{
background: pink;
flex:8;
}
</style>
</head>
<body>
<div id="app">
<router-view class="header"></router-view>
<div class="container">
<router-view class="left" name="left"></router-view>
<router-view class="right" name="main"></router-view>
</div>
</div>
<script src="vue.js"></script>
<script src="vue-resource.min.js"></script>
<script src="vue-router.js"></script>
<script>
var header={
template:'<h1>我是顶部栏</h1>'
};
var sidebar={
template:'<h1>我是侧边栏</h1>'
};
var main={
template:'<h1>我是主栏</h1>'
};
var vr=new VueRouter({
routes:[
{
path:'/',
components: {
'default': header,
'left': sidebar,
'main': main
}
}
]
});
new Vue({
el:'#app',
data:{
list:[
{ id: Date.now(), user: '司马迁', content: '欲加之罪！' },
{ id: Date.now()+1, user: '庄子', content: '水击千里！' },
{ id: Date.now()+2, user: '刘庄', content: '美女很多！' }
]
},
router:vr
})
</script>vue 路由经典布局
猜你喜欢
转载自blog.csdn.net/weixin_43209953/article/details/86501042
今日推荐
周排行