導航守衛
導航守衛主要用來通過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程中:全局的, 單個路由獨享的, 或者組件級的。(記住參數或查詢的改變并不會觸發進入/離開的導航守衛。你可以通過觀察$route對象來應對這些變化,或使用beforeRouteUpdate的組件內守衛。)
好久沒寫一些東西了,總是感覺有啥缺少的。~~~~恰好碰到最近在寫一個移動端項目,遇到了如何使同一個鏈接在不同條件下跳轉到不同路由組件問題,譬如大家經??吹绞謾C中沒登錄跳轉登錄頁,登陸后跳轉個人信息頁等。廢話不多說了,直接上圖:
這是沒登錄狀態,點擊下面mine按鈕跳轉至登錄頁
這個是我登錄了自己的賬號后,再次點擊mine按鈕會跳轉至個人信息頁面
好了,看到了這個效果今天咱們來實現下
實現方法
我們點擊下面mine按鈕其實是路由跳轉,所以我們需要在跳轉路由之前做一個判斷,根據不同的條件讓這個鏈接跳轉到不同路由。這時候我們vue-router中的導航守衛就閃亮登場了~~~
先看官方文檔: https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
vue-router 提供的導航守衛主要用來通過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程中:全局的, 單個路由獨享的, 或者組件級的。
官方文檔中說了很清楚,我們可以使用 router.beforeEach 注冊一個全局前置守衛:
在router文件夾下index.js中添加以下代碼
router.beforeEach((to, from, next) => { // ... })
這里對router.beforeEach
方法的每個參數做簡要的解釋。
“to”: 即將要進入的目標 路由對象;(這個對象中包含name,params,meta等屬性)
"from": 當前導航正要離開的路由對象;(這個對象中包含name,params,meta等屬性)
“next”: Function: 確保要調用 next 方法,否則鉤子就不會被 resolved。這個當中還可以傳一些參數,具體可以看官方文檔。
我們在代碼中做了一個判斷 if (to.name === 'Mine')
,也就是說當我們要跳轉的路由對象是Mine時候,才會進入導航守衛中判斷條件,當我們點擊其他鏈接跳轉其他頁正常,因為我們只有mine按鈕鏈接對應的情況有兩種。
// 登陸/注冊就去用戶詳情頁 if (localStorage.getItem('userID')) { router.replace('/myinfo') }
這段代碼就是判斷當用戶點擊了mine,我們需要判斷用戶是否是登錄還是未登錄了。因為之前用戶登錄的時候我將用戶的userID保存到了localStorage中,所以只需要判斷localStorage中是否有用戶的userID,來判斷用戶是否登錄。這里情況兩個,未登錄去登錄頁,登錄去個人信息頁
好了,通過簡單的配置使用,我們就可以愉快的根據不同的情況來實現路由跳轉不同組件了~
哈哈,很簡單吧,歡迎大家一起交流學習前端知識。我在GitHub上等你一起呦
~
說明
文章因為是在工作之余寫的,可能時間匆忙,有些錯別字或者語法等低級錯誤,歡迎留言指出,謝謝。。
同時在GitHub上也可以一起交流交流~~~
GitHub 走你
總結
以上所述是小編給大家介紹的vue router導航守衛(router.beforeEach())的使用詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。