目錄
(2)給三個組件的模板對象,定義佈局,flex實現下方左右佈局
一、前言
上一篇文章我們介紹了路由-使用children屬性實現路由嵌套,詳細可參考博文:原創 Vue筆記整理,專題之路由:7、路由-使用children屬性實現路由嵌套 ,這篇文章我們將介紹:路由-命名視圖實現經典佈局。
二、路由-命名視圖實現經典佈局
1、需要的實現效果展示
2、使用命名視圖
(1)代碼-命名視圖
<!DOCTYPE html>
<html lang="en">
<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>11.路由-命名視圖實現經典佈局</title>
<script src="./lib/vue-2.4.0.js"></script>
<!-- 步驟1: 安裝 vue-router 路由模塊 -->
<script src="./lib/vue-router-3.0.1.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<!-- 步驟5: 展示匹配到的組件
//其中router-view標籤的name屬性值,
//對應路由匹配規則,components中的屬性名,
//沒有指定name,即對應的屬性名爲default
-->
<router-view></router-view>
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
<script>
//步驟3:創建,三個組件的模板對象
var header = {
template: '<h1>Header頭部區域</h1>'
}
var leftBox = {
template: '<h1>Left側邊欄區域</h1>'
}
var mainBox = {
template: '<h1>mainBox主體區域</h1>'
}
//步驟2:創建路由對象,定義 routes匹配規則
var router = new VueRouter({
routes: [
// 這樣寫是不行的
// { path: '/', component: header },
// { path: '/left', component: leftBox },
// { path: '/main', component: mainBox }
// 這裏不使用 component,使用 components,
// 表示這個根路徑路由下,可以有多個組件
{ path: '/', components: {
'default': header,//屬性名 : 屬性值(組件),
'left': leftBox,
'main': mainBox
}
}
]
})
// 創建 Vue 實例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
//步驟4: 通過router屬性,將路由規則對象,註冊到 vm 實例上。
// router: router
router //如上面屬性值和屬性名完全一樣,可以簡寫成這樣。
});
</script>
</body>
</html>
這裏代碼作了詳細註釋,就不多說了。
關鍵是:router-view標籤的name屬性值 對應 components中的屬性名
(2)效果展示-命名視圖
運行程序,效果如下圖:
這樣命名視圖就搞定了,那麼實現經典佈局,就差寫樣式了。
3、實現經典佈局-寫樣式
(1)給三個組件的模板對象,添加樣式-顏色
(2)給三個組件的模板對象,定義佈局,flex實現下方左右佈局
效果如下圖:
(3)取消多餘邊距
效果如下圖:
三、最終修改代碼
<!DOCTYPE html>
<html lang="en">
<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>11.路由-命名視圖實現經典佈局</title>
<script src="./lib/vue-2.4.0.js"></script>
<!-- 步驟1: 安裝 vue-router 路由模塊 -->
<script src="./lib/vue-router-3.0.1.js"></script>
<style>
html,
body { /* 最外層邊距,進行取消 */
margin: 0;
padding: 0;
}
h1 { /* h1標籤邊距太大,進行取消 */
margin: 0;
padding: 0;
font-size: 16px;
}
.header {
background-color: orange;
height: 80px;
}
.container{
display: flex;/* flex實現下方左右佈局 */
height: 600px;
}
.left {
background-color: lightgreen;
flex: 2;
}
.main {
background-color: lightpink;
flex: 8;
}
</style>
</head>
<body>
<div id="app">
<!-- 步驟5: 展示匹配到的組件
//其中router-view標籤的name屬性值,
//對應路由匹配規則,components中的屬性名,
//沒有指定name,即對應的屬性名爲default
-->
<router-view></router-view>
<div class= "container">
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
</div>
<script>
//步驟3:創建,三個組件的模板對象
var header = {
template: '<h1 class="header">Header頭部區域</h1>'
}
var leftBox = {
template: '<h1 class="left">Left側邊欄區域</h1>'
}
var mainBox = {
template: '<h1 class="main">mainBox主體區域</h1>'
}
//步驟2:創建路由對象,定義 routes匹配規則
var router = new VueRouter({
routes: [
// 這樣寫是不行的
// { path: '/', component: header },
// { path: '/left', component: leftBox },
// { path: '/main', component: mainBox }
// 這裏不使用 component,使用 components,
// 表示這個根路徑路由下,可以有多個組件
{ path: '/', components: {
'default': header,//屬性名 : 屬性值(組件),
'left': leftBox,
'main': mainBox
}
}
]
})
// 創建 Vue 實例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
//步驟4: 通過router屬性,將路由規則對象,註冊到 vm 實例上。
// router: router
router //如上面屬性值和屬性名完全一樣,可以簡寫成這樣。
});
</script>
</body>
</html>