<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/vue.js"></script>
<script src="lib/vue-router.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.header {
height: 80px;
width: 100%;
background-color: green;
}
.container {
display: flex;
height: 600px;
}
.left {
flex: 2;
background-color: pink;
}
.main {
flex: 8;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 第一个不填代表默认 -->
<router-view 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>
<script>
var header = {
template: '<h1>头部</h1>'
}
var left = {
template: '<h1>左侧</h1>'
}
var main = {
template: '<h1>右侧</h1>'
}
var router = new VueRouter({
routes: [
{
path: '/',
//加了s可以填多个组件,default代表默认
//其他的名字随便取,但要和router-view里面的相对应
components: {
'default': header,
'left': left,
'main': main
}
}
]
})
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router: router
});
</script>
</body>
</html>
vue 使用命名视图实现经典布局-------components里面传对象-----router-view里面增加name属性
最新推荐文章于 2023-04-03 17:47:38 发布