vue父子組件生命周期，Vue中的Router路由嵌套
??Vue 中路由在使用的時候 嵌(qian)套 使(shi)用(yong)是非常頻(pin)繁的，所以本文(wen)我們就來通過案例來介(jie)紹(shao)下嵌套路由的使(shi)用(yong)。
一、Vue路由嵌套
1.正常路由案例
??我(wo)們先(xian)來(lai)準備一個普(pu)通的(de)路由(you)案例(li)
<!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>Document</title> <script src="./lib/vue-2.4.0.js"></script> <script src="./lib/vue-router-3.0.1.js"></script></head><body> <div id="app"> <!-- router-link 默認渲染為一個a 標簽 --> <router-link to="/login" >登錄</router-link> <router-link to="/register">注冊</router-link> <router-view></router-view> </div> <script> // 創建兩個子組件 模板對象 var login = { template: "<h3>登錄模塊</h3>"
} var register = { template: "<h3>注冊模塊</h3>"
} // 創建一個路由對象， 當 導入 vue-router 包之后，在 window 全局對象中， // 就有了一個 路由的構造函數叫做 VueRouter var routerObj = new VueRouter({ // 配置路由規則 routes:[
{path:"/",redirect:"/login"},
{path: "/login" , component: login},
{path: "/register" , component: register}
]
}) var vm = new Vue({ el: "#app", data: {}, methods: {}, // 將路由規則對象，注冊到 vm 實例上，用來監聽 URL 地址的變化， // 然后展示對應的組件 router:routerObj
}) </script></body></html>效果如下
在這里插(cha)入圖(tu)片描述
2.嵌套路由案例
??接下來我(wo)們看下 嵌套路由 的實現，
2.1 添加兩個組件模板
在(zai)這里插入圖片(pian)描述
2.2 修改登錄組件
??我們在登錄組件中再嵌套一個路由模塊，因為內容比較多，所以我們把這個 template 提取出來
在這里插入圖片描述
2.3 路由 children 使用
??接下(xia)來(lai)我(wo)們(men)需要(yao)配置嵌套的路由，具體(ti)如下(xia):
在這(zhe)里插入圖片描述(shu)
注意 通過children 配置的 path 中的路由地址 不能加 / 開頭。
2.4 效果
??具體實現效果(guo)如(ru)下:
在這(zhe)里插入圖片描(miao)述
效果搞定~
完整代碼如下:
<!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>Document</title> <script src="./lib/vue-2.4.0.js"></script> <script src="./lib/vue-router-3.0.1.js"></script></head><body> <div id="app"> <h1>客戶中心</h1> <router-link to="/login">登錄</router-link> <router-link to="/register">注冊</router-link> <router-view></router-view> </div> <template id='lc'> <div> <h2>登錄模塊</h2> <router-link to="/login/newc">新用戶</router-link> <router-link to="/login/oldc">老用戶</router-link> <router-view></router-view> </div> </template> <script> var login = { template: "#lc"
} var register = { template: "<h2>注冊模塊</h2>"
} var newc = { template: "<h2>新用戶登錄</h2>"
} var oldc = { template: "<h2>老用戶登錄</h2>"
} // 獲取 VueRouter 對象 var routerObj = new VueRouter({ routes : [
{path: "/" , redirect: "/login"},
{ path: "/login" ,
component: login, children :[
{path: "newc" , component: newc},
{path: "oldc" , component: oldc}
]
},
{path: "/register" , component: register}
]
}) var vm = new Vue({ el: "#app", data: { }, methods: { }, router: routerObj
}) </script></body></html>二、路由案例
??接下來我們通過Router來實現一個(ge)經典(dian)頁面布局(ju)的案例
效果如下
在這里插入(ru)圖片描(miao)述
代碼
<!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>Document</title> <script src="./lib/vue-2.4.0.js"></script> <script src="./lib/vue-router-3.0.1.js"></script> <style> html, body { margin: 0; padding: 0;
} .top { background-color: orange; height: 80px;
} h1 { margin: 0; padding: 0; font-size: 16px;
} .container { display: flex; height: 600px;
} .left { background-color: lightgreen; flex: 2;
} .content { background-color: lightpink; flex: 8;
} </style></head><body> <div id="app"> <router-view name="topbox"></router-view> <div class="container"> <router-view name="left" ></router-view> <router-view name="content" ></router-view> </div> </div> <script> var topbox = { template: "<h1 class='top'>頭部局部</h1>"
} var left = { template: "<h1 class='left'>左側菜單欄</h1>"
} var content = { template: "<h1 class='content'>內容主體</h1>"
} var routerObj = new VueRouter({ routes:[
{ path : "/" , components:{ "topbox":topbox, "left":left, "content":content
}}
]
}) var vm = new Vue({ el: "#app" , data: { } , methods: { }, router:routerObj
}) </script></body></html>注意:
路由匹配的時候如果有多個 組件模(mo)塊 我們需要通過 components 來處理
同時在現在組件的時候，每個 組件 對應一個 router-view 標簽，且(qie)通過 name屬性來綁定，如下
在這(zhe)里插入圖片描述
在(zai)這里插入圖片描述
搞定~
