vue-路由精講-導航守衛
路由跳轉前做一些驗證,比如登錄驗證,是網站中的普遍需求。
對此,vue-route 提供的 beforeRouteUpdate 可以方便地實現導航守衛(navigation-guards)。
導航守衛(navigation-guards)這個名字,聽起來怪怪的,但既然官方文檔是這樣翻譯的,就姑且這麽叫吧。
1.全局守衛
你可以使用 router.beforeEach
註冊一個全局前置守衛:
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... })
當一個導航觸發時,全局前置守衛按照創建順序調用。守衛是異步解析執行,此時導航在所有守衛 resolve 完之前一直處於 等待中。
beforeEach()方法中有一個回調函數,該函數中有三個參數。
-
參數to:表示
即將要進入的目標 (路由對象) -
參數from:
表示從哪個路由離開 -
參數next:
表示你要展示給我們看到的頁面效果,一定要調用該方法來 resolve 這個鉤子。執行效果依賴next
方法的調用參數。
下面寫一個例子:
要點一: 我們接著前面的例子繼續講。下面代碼,我們在全局守衛中,先 alert(“還沒有登錄,請先登錄”) ,此時刷新頁面會彈出一個alert窗口,我們點擊確定後,會發現無論點擊哪個路由模塊,都沒有頁面顯示。那是因為此時沒有添加一個 next() ,只要加上去就Ok了。
要點二: to.path表示當前你要跳轉的路徑,如果跳轉的是登錄和註冊,我們就0k,next(); 否則我們就把它引導到登錄裏面來 next(‘/login‘);
這樣就造成了用戶沒有登錄狀態下,只能點擊登錄和註冊有效。這就是一個全局守衛。
main.js部分代碼
1 const router = new VueRouter({ 2 routes, 3 mode:‘history‘ 4 }) 5 6 7 //全局守衛 8 router.beforeEach((to,from,next)=>{ 9 // alert("還沒有登錄,請先登陸");10 // next(); 11 // console.log(to); 12 13 //判斷store.gettes.isLogin === false 14 if(to.path == ‘/login‘ || to.path == ‘/register‘){ 15 next(); 16 }else{ 17 alert("還沒有登錄,請先登陸"); 18 next(‘/login‘); 19 } 20 }) 21 22 new Vue({ 23 el: ‘#app‘, 24 router, 25 render: h => h(App) 26 })
2.後置鉤子
afterEach() 表示進入組件之後所調用的方法,,beforeEach() 表示進入組件之前所調用的方法。
router.afterEach((to,from) =>{
}
router調用afterEach()方法,該方法中傳遞兩個參數,to 和 from 並給個箭頭函數。
3.路由獨享守衛
可以在路由配置上直接定義 beforeEnter
守衛:比如:我們想進入Foo這頁面裏面的話,直接在其路由後面加上beforeEnteer()方法。
同理也是需要next() 來展示頁面,,如果沒有,則顯示不了頁面內容。
4.組件內的守衛
最後,你可以在路由組件內直接定義以下路由導航守衛:
beforeRouteEnter
beforeRouteUpdate
(2.2 新增)beforeRouteLeave
beforeRouteEnter
守衛 不能 訪問 this
,因為守衛在導航確認前被調用,因此即將登場的新組件還沒被創建。
不過,你可以通過傳一個回調給 next
來訪問組件實例。在導航被確認的時候執行回調,並且把組件實例作為回調方法的參數。
註意 beforeRouteEnter
是支持給 next
傳遞回調的唯一守衛。對於 beforeRouteUpdate
和 beforeRouteLeave
來說,this
已經可用了,所以不支持傳遞回調,因為沒有必要了。
這個離開守衛通常用來禁止用戶在還未保存修改前突然離開。該導航可以通過 next(false)
來取消。
完整的導航解析流程
- 導航被觸發。
- 在失活的組件裏調用離開守衛。
- 調用全局的
beforeEach
守衛。 - 在重用的組件裏調用
beforeRouteUpdate
守衛 (2.2+)。 - 在路由配置裏調用
beforeEnter
。 - 解析異步路由組件。
- 在被激活的組件裏調用
beforeRouteEnter
。 - 調用全局的
beforeResolve
守衛 (2.5+)。 - 導航被確認。
- 調用全局的
afterEach
鉤子。 - 觸發 DOM 更新。
- 用創建好的實例調用
beforeRouteEnter
守衛中傳給next
的回調函數。
vue-路由精講-導航守衛