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

Vue?router?路由守衛(wèi)詳解

 更新時(shí)間:2021年12月26日 16:42:55   作者:學(xué)習(xí)中的小菜鳥.  
這篇文章主要為大家介紹了Vue?router?路由守衛(wèi),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助

一、全局前置beforeEach

當(dāng) Local Storage 里面存儲(chǔ)的 name 是 zhangsan 的時(shí)候, 點(diǎn)擊消息才顯示消息內(nèi)容

1. 全局前置beforeEach

給router添加一個(gè)路由守衛(wèi) beforeEach

語法 :

router.beforeEach((to, from, next)=>{})

作用 : 初始化的時(shí)候 和 在每一次路由切換之前調(diào)用beforeEach里面的函數(shù)

參數(shù) :

1.to : 目標(biāo)路由

2.from : 跳轉(zhuǎn)前的路由

3.next : 放行

2. 實(shí)現(xiàn)

二、需求二

如果有很多個(gè)路徑都需要做出判斷以后才跳轉(zhuǎn), 就需要寫很多判斷的代碼, 判斷結(jié)構(gòu)就會(huì)很復(fù)雜

這時(shí)需要判斷的路由里面就可以放一個(gè)meta標(biāo)簽

meta標(biāo)簽提供關(guān)于HTML文檔的元數(shù)據(jù) (元數(shù)據(jù)指用來描述數(shù)據(jù)的數(shù)據(jù))

這時(shí)就可以使用meta里面的標(biāo)記字段進(jìn)行判斷

三、全局后置守衛(wèi) afterEach

afterEach 和 beforeEach 使用方法基本一致.

區(qū)別就是afterEach沒有next這個(gè)參數(shù)

1. 修改title為自己的title

給每個(gè)路由指定自己的title名稱

const router = new VueRouter({
  routes: [
    {
      name: 'home',
      path: '/home',
      component: Home,
      meta: {
        title: "首頁"
      },
      children: [ 
        {
          name: "xiaoxi",
          path: 'message',
          component: Message,
          meta: {
            title: "消息"
          },
          children: [
            {
              name: 'xiangqing',
              path: 'detail',
              component: Detail,
              meta: {
                isAuth: true,
                title: "消息詳情"
              }
            }
          ]
        }
      ]
    },
    {
      path: '/about',
      component: About,
      meta: {
        title: "關(guān)于"
      }
    }
  ]
})

在 beforEach里面修改title名

router.afterEach((to, from) => {
  document.title = to.meta.title || "測(cè)試"
})

四、組件內(nèi)守衛(wèi)

1. beforeRouteEnter

通過路由規(guī)則, 進(jìn)入該組件時(shí)被調(diào)用

2. beforeRouteLeave

通過路由規(guī)則, 離開該組件時(shí)被調(diào)用

總結(jié)

本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

相關(guān)文章

  • element-ui組件table實(shí)現(xiàn)自定義篩選功能的示例代碼

    element-ui組件table實(shí)現(xiàn)自定義篩選功能的示例代碼

    這篇文章主要介紹了element-ui組件table實(shí)現(xiàn)自定義篩選功能的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-03-03
  • vue?watch監(jiān)聽方法總結(jié)

    vue?watch監(jiān)聽方法總結(jié)

    這篇文章主要給大家分享的是vue?watch監(jiān)聽方法總結(jié),偵聽器一般來說是用來監(jiān)聽數(shù)據(jù)的變化,默認(rèn)是在數(shù)據(jù)發(fā)生變化時(shí)執(zhí)行。監(jiān)聽的數(shù)據(jù)名放到這里面作為函數(shù)名,這個(gè)函數(shù)里面有兩個(gè)參數(shù),一個(gè)是新值,一個(gè)是舊值。下面我們就一起進(jìn)入文章了解更具體的內(nèi)容吧
    2021-12-12
  • vue項(xiàng)目同時(shí)兼容pc和移動(dòng)端的解決方式

    vue項(xiàng)目同時(shí)兼容pc和移動(dòng)端的解決方式

    我們經(jīng)常在項(xiàng)目中會(huì)有支持pc與手機(jī)端需求,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目同時(shí)兼容pc和移動(dòng)端的解決方式,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-10-10
  • element中Select選擇器實(shí)現(xiàn)自定義顯示內(nèi)容

    element中Select選擇器實(shí)現(xiàn)自定義顯示內(nèi)容

    在我們很多前端業(yè)務(wù)開發(fā)中,往往為了方便,都需要自定義一些用戶組件,本文主要介紹了element中Select選擇器實(shí)現(xiàn)自定義顯示內(nèi)容,感興趣的可以了解一下
    2023-12-12
  • vue實(shí)現(xiàn)的下拉框功能示例

    vue實(shí)現(xiàn)的下拉框功能示例

    這篇文章主要介紹了vue實(shí)現(xiàn)的下拉框功能,涉及vue.js數(shù)據(jù)讀取、遍歷、事件響應(yīng)等相關(guān)操作技巧,需要的朋友可以參考下
    2019-01-01
  • vue彈窗父子組件調(diào)用問題示例詳解

    vue彈窗父子組件調(diào)用問題示例詳解

    這篇文章主要介紹了vue彈窗父子組件調(diào)用問題,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-08-08
  • 監(jiān)聽element-ui table滾動(dòng)事件的方法

    監(jiān)聽element-ui table滾動(dòng)事件的方法

    這篇文章主要介紹了監(jiān)聽element-ui table滾動(dòng)事件的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • 讓ChatGPT解讀Vue3源碼過程解析

    讓ChatGPT解讀Vue3源碼過程解析

    這篇文章主要為大家介紹了讓ChatGPT解讀Vue3源碼過程解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-02-02
  • Vue.js通過組件處理Icon圖標(biāo)

    Vue.js通過組件處理Icon圖標(biāo)

    這篇文章介紹了Vue.js通過組件處理Icon圖標(biāo)的方法,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-11-11
  • vue.js 實(shí)現(xiàn)v-model與{{}}指令方法

    vue.js 實(shí)現(xiàn)v-model與{{}}指令方法

    這篇文章主要介紹了vue.js 實(shí)現(xiàn)v-model與{{}}指令方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-10-10

最新評(píng)論