vue3中7種路由守衛(wèi)如何使用

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

路由守衛(wèi)有哪幾種？

路由守衛(wèi)(導(dǎo)航守衛(wèi))分為三種：全局守衛(wèi)（3個）、路由獨享守衛(wèi)（1個）、組件的守衛(wèi)（3個）

路由守衛(wèi)的三個參數(shù)

to：要跳轉(zhuǎn)到的目標(biāo)路由

from：從當(dāng)前哪個路由進行跳轉(zhuǎn)

next：不做任何阻攔，直接通行

注意： 必須要確保 next函數(shù) 在任何給定的導(dǎo)航守衛(wèi)中都被調(diào)用過一次。它可以出現(xiàn)多次，但是只能在所有的邏輯路徑都不重疊的情況下，否則會報錯。

案例：

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

一、全局路由守衛(wèi)

全局路由守衛(wèi)有三個：全局前置守衛(wèi)，全局后置守衛(wèi),全局解析守衛(wèi)

全局前置守衛(wèi)

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

2.代碼:

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

3.例子:做登錄判斷

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

全局后置守衛(wèi)

1.使用方式：main.js中配置,和beforeEach相反，它是在路由跳轉(zhuǎn)完成后觸發(fā)，它發(fā)生在beforeEach和beforeResolve之后，beforeRouteEnter（組件內(nèi)守衛(wèi)）之前。鉤子不會接受next函數(shù)也不會改變導(dǎo)航本身

2.代碼:

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

全局解析守衛(wèi)

1.使用方式：main.js中配置,這個鉤子和beforeEach類似，也是路由跳轉(zhuǎn)前觸發(fā)，區(qū)別是在導(dǎo)航被確認(rèn)之前，同時在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后，即在 beforeEach 和 組件內(nèi)beforeRouteEnter 之后，afterEach之前調(diào)用。

2.代碼:

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

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

組件內(nèi)守衛(wèi)有個三個：路由進入之前beforeRouteEnter，路由離開時beforeRouteLeave,頁面更新時beforeRouteUpdate

• beforeRouteEnter(to, from, next)

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

2.代碼:

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

beforeRouteUpdate(to, from, next)

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

2.代碼:

beforeRouteUpdate (to, from, next) {
    // 同一頁面，刷新不同數(shù)據(jù)時調(diào)用，
    // 可以訪問組件實例 
}

• beforeRouteLeave(to, from, next)

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

2.代碼:

beforeRouteLeave (to, from, next) {
    // 導(dǎo)航離開該組件的對應(yīng)路由時調(diào)用
    // 可以訪問組件實例
}

路由獨享守衛(wèi)

路由獨享守衛(wèi)只有一個:進入路由時觸發(fā)beforeEnter

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

1.使用方式：在router.js中使用,路由獨享守衛(wèi)是在路由配置頁面單獨給路由配置的一個守衛(wèi)

2.代碼

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

導(dǎo)航解析流程

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

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