您的位置：首页 > 其它

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

2019-03-08 21:06 155 查看

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./lib/vue.js"></script>
<script src="./lib/vue-router-3.0.1.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
.header{
height: 80px;
background-color: #0f70ae;
}
.contain{
display: flex;
height: 600px;
}
.left{
background-color: red;
flex:2
}
.right{
background-color: yellow;
flex: 8;
}
</style>
</head>
<body>
<div id="app">
<router-view></router-view>
<div class="contain">
<router-view name="left"></router-view>
<router-view name="right"></router-view>
</div>
<!--<router-view name="left"></router-view>-->
<!--<router-view name="right"></router-view>-->
</div>

<script>
var header = {
template:'<h1 class="header">这是头部header</h1>'
}
var headerleft = {
template:'<h1 class="left">这是头部header-----left</h1>'
}
var headerright = {
template:'<h1 class="right">这是头部header-----right</h1>'
}
var router=new VueRouter({
routes:[
{path:'/',components:{
default:header,
left:headerleft,
right:headerright
}},

]
})
var vm= new Vue({
el:'#app',
data:{},
router:router,
methods:{}
})
</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航