所謂的經(jīng)典布局，就是上面一個header，左側(cè)一個側(cè)邊欄，右側(cè)為內(nèi)容的主題部分的結(jié)構(gòu)布局
想要在一個頁面顯示多個
<router-view>占位標(biāo)簽，現(xiàn)在學(xué)到的東西還做不到
例：
<!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
此時，我們輸入路徑三個占位標(biāo)簽都顯示的是同樣的內(nèi)容，這不是我們想要的，思考一下，我們感覺應(yīng)該有一個判斷的機(jī)制，來控制顯示的內(nèi)容
想要分別顯示不同的內(nèi)容，此時我們的
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
