命名视图来实现经典布局
2019-08-16 本文已影响0人
最爱喝龙井
所谓的经典布局，就是上面一个header，左侧一个侧边栏，右侧为内容的主题部分的结构布局
想要在一个页面显示多个
<router-view>占位标签，现在学到的东西还做不到
例：
<!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="js/vue.js"></script>
<script src="js/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="app">
<router-view></router-view>
<router-view></router-view>
<router-view></router-view>
</div>
<script>
var header = {
template: '<h1>header</h1>'
}
var leftBox = {
template: '<h1>leftBox</h1>'
}
var mainBox = {
template: '<h1>mainBox</h1>'
}
var router = new VueRouter({
routes: [
{path: '/', component: header},
{path: '/leftBox', component: leftBox},
{path: '/mainBox', component: mainBox}
]
})
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router
});
</script>
</body>
</html>
页面显示，如下：
image.png
此时，我们输入路径三个占位标签都显示的是同样的内容，这不是我们想要的，思考一下，我们感觉应该有一个判断的机制，来控制显示的内容
想要分别显示不同的内容，此时我们的
component属性，就无能为力了，这是我们可以借助components属性，这个属性是一个对象，里面可以自定义键值对，来链接我们的组件模板对象，然后，在<router-view name='定义的名字'>元素中，添加一个name属性，这个属性的值就是我们在components对象中定义的键名
<!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="js/vue.js"></script>
<script src="js/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="app">
<router-view></router-view>
<router-view name='left'></router-view>
<router-view name='main'></router-view>
</div>
<script>
var header = {
template: '<h1>header</h1>'
}
var leftBox = {
template: '<h1>leftBox</h1>'
}
var mainBox = {
template: '<h1>mainBox</h1>'
}
var router = new VueRouter({
routes: [
{path: '/', components: {
default: header,
left: leftBox,
main: mainBox
}},
]
})
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router
});
</script>
</body>
</html>
浏览器显示，如下
image.png
