所謂的經典布局竿报，就是上面一個header句携，左側一個側邊欄疗锐，右側為內容的主題部分的結構布局
想要在一個頁面顯示多個
<router-view>占位標簽，現(xiàn)在學到的東西還做不到
例：
<!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
