欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue router導(dǎo)航守衛(wèi)(router.beforeEach())的使用詳解

 更新時間:2019年04月19日 08:32:19   作者:pubdreamcc  
導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。這篇文章主要介紹了vue-router導(dǎo)航守衛(wèi)(router.beforeEach())的使用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下

導(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上也可以一起交流交流~~~

GitHub 走你

總結(jié)

以上所述是小編給大家介紹的vue router導(dǎo)航守衛(wèi)(router.beforeEach())的使用詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!

相關(guān)文章

  • Vue.js框架路由使用方法實(shí)例詳解

    Vue.js框架路由使用方法實(shí)例詳解

    這篇文章主要介紹了Vue.js框架路由使用方法實(shí)例詳解的相關(guān)資料,這里提供實(shí)例幫助大家學(xué)習(xí)理解這部分內(nèi)容,需要的朋友可以參考下
    2017-08-08
  • vue elementui異步給dom賦值無效問題

    vue elementui異步給dom賦值無效問題

    這篇文章主要介紹了vue elementui異步給dom賦值無效問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-06-06
  • vue 屬性攔截實(shí)現(xiàn)雙向綁定的實(shí)例代碼

    vue 屬性攔截實(shí)現(xiàn)雙向綁定的實(shí)例代碼

    這篇文章主要介紹了vue 屬性攔截實(shí)現(xiàn)雙向綁定的實(shí)例代碼,代碼簡答易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-10-10
  • vue-cli3配置favicon.ico和title的流程

    vue-cli3配置favicon.ico和title的流程

    這篇文章主要介紹了vue-cli3配置favicon.ico和title的流程,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • Vue3數(shù)據(jù)更新,頁面沒有同步更新的問題及解決

    Vue3數(shù)據(jù)更新,頁面沒有同步更新的問題及解決

    這篇文章主要介紹了Vue3數(shù)據(jù)更新,頁面沒有同步更新的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • 一步步帶你用vite簡單搭建ts+vue3全家桶

    一步步帶你用vite簡單搭建ts+vue3全家桶

    Vue3與TS的聯(lián)合是大趨勢,下面這篇文章主要給大家介紹了關(guān)于用vite簡單搭建ts+vue3全家桶的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-07-07
  • 深入理解Vue nextTick 機(jī)制

    深入理解Vue nextTick 機(jī)制

    這篇文章主要介紹了深入理解Vue nextTick 機(jī)制,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • Vue3.js自定義組件 v-model詳解

    Vue3.js自定義組件 v-model詳解

    在Vue3 中,v-model是用于創(chuàng)建雙向數(shù)據(jù)綁定的指令,通常,我們使用該指令將任何 HTML 表單元素與一個變量綁定以收集輸入值,本文給大家介紹Vue3.js自定義組件 v-model,感興趣的朋友一起看看吧
    2023-10-10
  • 詳解swiper在vue中的應(yīng)用(以3.0為例)

    詳解swiper在vue中的應(yīng)用(以3.0為例)

    這篇文章主要介紹了詳解swiper在vue中的應(yīng)用(以3.0為例),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • vite的proxy查看真實(shí)請求地址方式詳解

    vite的proxy查看真實(shí)請求地址方式詳解

    這篇文章主要為大家介紹了vite的proxy查看真實(shí)請求地址方式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-11-11

最新評論