所謂的經典布局竿报,就是上面一個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