91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue3中7種路由守衛如何使用

發布時間:2023-03-30 11:10:13 來源:億速云 閱讀:103 作者:iii 欄目:開發技術

這篇文章主要講解了“vue3中7種路由守衛如何使用”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“vue3中7種路由守衛如何使用”吧!

路由守衛有哪幾種?

路由守衛(導航守衛)分為三種:全局守衛(3個)、路由獨享守衛(1個)、組件的守衛(3個)

路由守衛的三個參數

to:要跳轉到的目標路由

from:從當前哪個路由進行跳轉

next:不做任何阻攔,直接通行

注意: 必須要確保 next函數 在任何給定的導航守衛中都被調用過一次。它可以出現多次,但是只能在所有的邏輯路徑都不重疊的情況下,否則會報錯。

案例:

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

一、全局路由守衛

全局路由守衛有三個:全局前置守衛,全局后置守衛,全局解析守衛

全局前置守衛

1.使用方式:main.js中配置,在路由跳轉前觸發,這個鉤子作用主要是用于登錄驗證,也就是路由還沒跳轉提前告知,以免跳轉了再通知就為時已晚

2.代碼:

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

3.例子:做登錄判斷

router.beforeEach((to,from,next)=>{
  if(to.path == '/login' || to.path == '/register'){
    next();
  }else{
    alert('您還沒有登錄,請先登錄');
    next('/login');
  }
})

全局后置守衛

1.使用方式:main.js中配置,和beforeEach相反,它是在路由跳轉完成后觸發,它發生在beforeEach和beforeResolve之后,beforeRouteEnter(組件內守衛)之前。鉤子不會接受next函數也不會改變導航本身

2.代碼:

router.afterEach((to,from)=>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->})

全局解析守衛

1.使用方式:main.js中配置,這個鉤子和beforeEach類似,也是路由跳轉前觸發,區別是在導航被確認之前,同時在所有組件內守衛和異步路由組件被解析之后,即在 beforeEach 和 組件內beforeRouteEnter 之后,afterEach之前調用。

2.代碼:

router.beforeResolve((to,from,next)=>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->})

一、組件內守衛

組件內守衛有個三個:路由進入之前beforeRouteEnter,路由離開時beforeRouteLeave,頁面更新時beforeRouteUpdate

  • beforeRouteEnter(to, from, next)

1.使用方式:在組件模板中使用,跟methods: {}等同級別書寫,組件路由守衛是寫在每個單獨的vue文件里面的路由守衛

2.代碼:

beforeRouteEnter(to, from, next) {
    // 在組件生命周期beforeCreate階段觸發
    console.log('組件內路由前置守衛 beforeRouteEnter', this) // 訪問不到this
    next((vm) => {
      console.log('組件內路由前置守衛 vm', vm) // vm 就是this
    })
  },

beforeRouteUpdate(to, from, next)

1.使用方式:在組件模板中使用,跟methods: {}等同級別書寫,組件路由守衛是寫在每個單獨的vue文件里面的路由守衛

2.代碼:

beforeRouteUpdate (to, from, next) {
    // 同一頁面,刷新不同數據時調用,
    // 可以訪問組件實例 
}
  • beforeRouteLeave(to, from, next)

1.使用方式:在組件模板中使用,跟methods: {}等同級別書寫,組件路由守衛是寫在每個單獨的vue文件里面的路由守衛

2.代碼:

beforeRouteLeave (to, from, next) {
    // 導航離開該組件的對應路由時調用
    // 可以訪問組件實例
}

路由獨享守衛

路由獨享守衛只有一個:進入路由時觸發beforeEnter

  • 路由獨享守衛 beforeEnter(to, from, next)

1.使用方式:在router.js中使用,路由獨享守衛是在路由配置頁面單獨給路由配置的一個守衛

2.代碼

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

導航解析流程

1.觸發進入其它路由
2.調用要離開路由的組件守衛beforeRouteLeave
3.調用全局的前置守衛beforeEach
4.在重用的組件里調用 beforeRouteUpdate
5.在路由配置里的單條路由調用 beforeEnter
6.解析異步路由組件
7.在將要進入的路由組件中調用beforeRouteEnter
8.調用全局的解析守衛beforeResolve
9.導航被確認
10.調用全局的后置鉤子afterEach
11.觸發 DOM 更新mounted
12.執行beforeRouteEnter守衛中傳給 next的回調函數

感謝各位的閱讀,以上就是“vue3中7種路由守衛如何使用”的內容了,經過本文的學習后,相信大家對vue3中7種路由守衛如何使用這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關知識點的文章,歡迎關注!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

宝鸡市| 阜南县| 长沙县| 桃园市| 包头市| 鸡西市| 湘西| 长沙县| 会昌县| 包头市| 玛纳斯县| 宁国市| 加查县| 日照市| 神农架林区| 达拉特旗| 湖北省| 固始县| 珲春市| 仁化县| 福贡县| 吴川市| 东海县| 济宁市| 凯里市| 新民市| 岫岩| 民丰县| 石门县| 苗栗市| 肇庆市| 遵义县| 兴宁市| 乌拉特中旗| 阿克苏市| 渑池县| 正安县| 玛纳斯县| 上林县| 陕西省| 农安县|