vue router導(dǎo)航守衛(wèi)(router.beforeEach())的使用詳解
導(dǎo)航守衛(wèi)
導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。有多種機(jī)會植入路由導(dǎo)航過程中:全局的, 單個路由獨(dú)享的, 或者組件級的。(記住參數(shù)或查詢的改變并不會觸發(fā)進(jìn)入/離開的導(dǎo)航守衛(wèi)。你可以通過觀察$route對象來應(yīng)對這些變化,或使用beforeRouteUpdate的組件內(nèi)守衛(wèi)。)
好久沒寫一些東西了,總是感覺有啥缺少的。~~~~恰好碰到最近在寫一個移動端項(xiàng)目,遇到了如何使同一個鏈接在不同條件下跳轉(zhuǎn)到不同路由組件問題,譬如大家經(jīng)??吹绞謾C(jī)中沒登錄跳轉(zhuǎn)登錄頁,登陸后跳轉(zhuǎn)個人信息頁等。廢話不多說了,直接上圖:
這是沒登錄狀態(tài),點(diǎn)擊下面mine按鈕跳轉(zhuǎn)至登錄頁
這個是我登錄了自己的賬號后,再次點(diǎn)擊mine按鈕會跳轉(zhuǎn)至個人信息頁面
好了,看到了這個效果今天咱們來實(shí)現(xiàn)下
實(shí)現(xiàn)方法
我們點(diǎn)擊下面mine按鈕其實(shí)是路由跳轉(zhuǎn),所以我們需要在跳轉(zhuǎn)路由之前做一個判斷,根據(jù)不同的條件讓這個鏈接跳轉(zhuǎn)到不同路由。這時候我們vue-router中的導(dǎo)航守衛(wèi)就閃亮登場了~~~
先看官方文檔: https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
vue-router 提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。有多種機(jī)會植入路由導(dǎo)航過程中:全局的, 單個路由獨(dú)享的, 或者組件級的。
官方文檔中說了很清楚,我們可以使用 router.beforeEach 注冊一個全局前置守衛(wèi):
在router文件夾下index.js中添加以下代碼
router.beforeEach((to, from, next) => { // ... })
這里對router.beforeEach
方法的每個參數(shù)做簡要的解釋。
“to”: 即將要進(jìn)入的目標(biāo) 路由對象;(這個對象中包含name,params,meta等屬性)
"from": 當(dāng)前導(dǎo)航正要離開的路由對象;(這個對象中包含name,params,meta等屬性)
“next”: Function: 確保要調(diào)用 next 方法,否則鉤子就不會被 resolved。這個當(dāng)中還可以傳一些參數(shù),具體可以看官方文檔。
我們在代碼中做了一個判斷 if (to.name === 'Mine')
,也就是說當(dāng)我們要跳轉(zhuǎn)的路由對象是Mine時候,才會進(jìn)入導(dǎo)航守衛(wèi)中判斷條件,當(dāng)我們點(diǎn)擊其他鏈接跳轉(zhuǎn)其他頁正常,因?yàn)槲覀冎挥衜ine按鈕鏈接對應(yīng)的情況有兩種。
// 登陸/注冊就去用戶詳情頁 if (localStorage.getItem('userID')) { router.replace('/myinfo') }
這段代碼就是判斷當(dāng)用戶點(diǎn)擊了mine,我們需要判斷用戶是否是登錄還是未登錄了。因?yàn)橹坝脩舻卿浀臅r候我將用戶的userID保存到了localStorage中,所以只需要判斷l(xiāng)ocalStorage中是否有用戶的userID,來判斷用戶是否登錄。這里情況兩個,未登錄去登錄頁,登錄去個人信息頁
好了,通過簡單的配置使用,我們就可以愉快的根據(jù)不同的情況來實(shí)現(xiàn)路由跳轉(zhuǎn)不同組件了~
哈哈,很簡單吧,歡迎大家一起交流學(xué)習(xí)前端知識。我在GitHub上等你一起呦
~
說明
文章因?yàn)槭窃诠ぷ髦鄬懙模赡軙r間匆忙,有些錯別字或者語法等低級錯誤,歡迎留言指出,謝謝。。
同時在GitHub上也可以一起交流交流~~~
總結(jié)
以上所述是小編給大家介紹的vue router導(dǎo)航守衛(wèi)(router.beforeEach())的使用詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
vue 屬性攔截實(shí)現(xiàn)雙向綁定的實(shí)例代碼
這篇文章主要介紹了vue 屬性攔截實(shí)現(xiàn)雙向綁定的實(shí)例代碼,代碼簡答易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10vue-cli3配置favicon.ico和title的流程
這篇文章主要介紹了vue-cli3配置favicon.ico和title的流程,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10Vue3數(shù)據(jù)更新,頁面沒有同步更新的問題及解決
這篇文章主要介紹了Vue3數(shù)據(jù)更新,頁面沒有同步更新的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03詳解swiper在vue中的應(yīng)用(以3.0為例)
這篇文章主要介紹了詳解swiper在vue中的應(yīng)用(以3.0為例),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09