嵌套路由 嵌套路由：一個路由配置中嵌套其他的路由配置。 嵌套路由挺常用的，比如導航欄有首頁、文章、想法、留言4個模塊，我們以嵌套路由的形式集成這些模塊，在導航欄中點擊對應的條目，就會路由到對應的頁面（下方顯示對應的頁面），和html的<iframe>效果差不多。 demo 嵌套路由 <!DOCTYP ...
嵌套路由
嵌套路由：一個路由配置中嵌套其他的路由配置。
嵌套路由挺常用的，比如導航欄有首頁、文章、想法、留言4個模塊，我們以嵌套路由的形式集成這些模塊，在導航欄中點擊對應的條目，就會路由到對應的頁面（下方顯示對應的頁面），和html的<iframe>效果差不多。
demo 嵌套路由
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 引入vue.js --> <script src="js/vue.js"></script> <!-- 引入路由插件 --> <script src="js/vue-router.js"></script> </head> <body> <div id="app"></div> <script> // 導航 var Nav={ template:` <div> <router-link :to="{name:'nav.index'}">首頁</router-link> <router-link :to="{name:'nav.article'}">文章</router-link> <router-link :to="{name:'nav.idea'}">想法</router-link> <router-link :to="{name:'nav.message'}">留言</router-link> <router-view></router-view> <!-- 留坑，點擊上面4個路由鏈接，會在此處顯示對應的頁面 --> </div> `, } // 首頁 var Index={ template:` <div> <p>這是首頁部分</p> </div> `, } // 文章 var Article={ template:` <div> <p>這是文章部分</p> </div> `, } // 想法 var Idea={ template:` <div> <p>這是想法部分</p> </div> `, } // 留言 var Message={ template:` <div> <p>這是留言部分</p> </div> `, } // 安裝路由插件 Vue.use(VueRouter); // 創建路由對象 var router=new VueRouter({ // 配置路由規則 routes:[ {path:'/',name:'nav',component:Nav,children:[ //path直接映射到根路徑（當前html頁面下）下，children配置要嵌套的路由,對象數組形式 {path:'/index',name:'nav.index',component:Index}, //嵌套的路由的name里一般都要帶上外部的路由容器，一看就知道關係 {path:'/article',name:'nav.article',component:Article}, {path:'/idea',name:'nav.idea',component:Idea}, {path:'/message',name:'nav.message',component:Message}, {path:'',name:'nav.index',component:Index}, //要點擊nav中對應的鏈接才會路由到指定頁面，我們給它配置一個預設的路由頁面，path:'' ]}, ] }); new Vue({ el:'#app', router, //使用路由 template:` <div> <router-view></router-view> <!-- 留給nav的坑位 --> </div> `, }) </script> </body> </html>
嵌套的路由的path可以使用相對路徑、也可以使用絕對路徑
{path:'/nav',name:'nav',component:Nav,children:[
{path:'/index',name:'nav.index',component:Index} //絕對路徑
]}
/表示根路徑（當前html頁面）。index的訪問路徑是.....html#/index
{path:'/nav',name:'nav',component:Nav,children:[
{path:'index',name:'nav.index',component:Index} //相對路徑，相對於外部路由
]}
index的訪問路徑是....html#/nav/index
路由守衛
一個頁面路由到另一個頁面，路由到目標頁面之前可以做一些處理，比如登錄檢測、許可權檢查，不滿足就不路由到目標頁面，給出提示信息。
demo 路由守衛
// 安裝路由插件 Vue.use(VueRouter); // 創建路由對象 var router=new VueRouter({ // 配置路由規則 routes:[ //..... ] }); new Vue({ el:'#app', template:` <div> <router-view></router-view> <!-- 留坑 --> </div> `, router, data(){ return{ //...... } }, mounted(){ router.beforeEach( (to,from)=>{ //路由守衛。使用ES6的箭頭函數做一些前處理。2個參數分別封裝了目標頁面、上一個頁面的信息 //...... }); }, })
路由守衛要寫在html頁面的new Vue()中，一般是寫在mouted(){ }中。
上一個頁面要傳數據給目標頁面，比如username、uid、loginstate、role什麼的，可以在data中用一些變數保存這些數據，路由守衛根據這些數據進行登錄檢測、許可權檢測。
執行到mouted()時，數據已經掛載，可以獲取到數據，路由守衛可以拿到數據進行檢測啦。
beforeEach，顧名思義，每次路由到目標頁面時，都會使用路由守衛進行檢測。
現在好多應用都是mvc模式，controller那裡攔截器、過濾器什麼的早就對請求進行了過濾，登錄檢測、許可權檢查已經做過了，在視圖這裡沒必要再使用路由守衛來過濾。
路由守衛用得很少，瞭解即可。
