路由守衛(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)前哪個路由進(jìn)行跳轉(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)=>{<!--{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)=>{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->})

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

組件內(nèi)守衛(wèi)有個三個：路由進(jìn)入之前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)只有一個:進(jìn)入路由時觸發(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ā)進(jìn)入其它路由
2.調(diào)用要離開路由的組件守衛(wèi)beforeRouteLeave
3.調(diào)用全局的前置守衛(wèi)beforeEach
4.在重用的組件里調(diào)用 beforeRouteUpdate
5.在路由配置里的單條路由調(diào)用 beforeEnter
6.解析異步路由組件
7.在將要進(jìn)入的路由組件中調(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ù)

補(bǔ)充：下面在看看三個組件內(nèi)部守衛(wèi)

• beforeRouteEnter
• beforeRouteUpdate
• beforeRouteLeave

export default {
  setup() {},
  mounted(){
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
  },
//  組件內(nèi)守衛(wèi)
beforeRouteEnter(to ,from , next){
    // next() 可以通過內(nèi)部的回調(diào)函數(shù)訪問實例
     // 在渲染該組件的對應(yīng)路由被驗證前調(diào)用
    // 不能獲取組件實例 `this` ！
    // 因為當(dāng)守衛(wèi)執(zhí)行時，組件實例還沒被創(chuàng)建！
    window.console.log(this) // undefined
    window.console.log(to)
    window.console.log(from)
    next((e)=> {
        window.console.log(e) // 當(dāng)前的this
    })
},
beforeRouteUpdata(to ,from){
    // 無 next 
     // 在當(dāng)前路由改變，但是該組件被復(fù)用時調(diào)用
    // 舉例來說，對于一個帶有動態(tài)參數(shù)的路徑 `/users/:id`，在 `/users/1` 和 `/users/2` 之間跳轉(zhuǎn)的時候，
    // 由于會渲染同樣的 `UserDetails` 組件，因此組件實例會被復(fù)用。而這個鉤子就會在這個情況下被調(diào)用。
    // 因為在這種情況發(fā)生的時候，組件已經(jīng)掛載好了，導(dǎo)航守衛(wèi)可以訪問組件實例 `this`
    window.console.log(this)
    window.console.log(to)
    window.console.log(from)
},
beforeRouteLeave(to ,from){
    // 無 next
    // 在導(dǎo)航離開渲染該組件的對應(yīng)路由時調(diào)用
    // 與 `beforeRouteUpdate` 一樣，它可以訪問組件實例 `this`
    window.console.log(this)
    window.console.log(to)
    window.console.log(from)
},
}

解析 ： 這三個差不多就放在一起還有個對照

1.首先來說說執(zhí)行時機(jī) ： 路由獨享守衛(wèi)的后面 調(diào)用這三個守衛(wèi) 。

2. 書寫位置 ： 在單個vue文件內(nèi)部 ， 與 methods , 等 api 同級

3. 只有 beforeRouteEnter 參數(shù) 有 next , 因為這個路由不能訪問this ，于是就有了next 函數(shù) ， 可以向里面?zhèn)鬟f一個回調(diào)函數(shù) ， 回調(diào)函數(shù)的參數(shù)就是 this , 可以看代碼， 其他兩個組件內(nèi)部守衛(wèi) 都可以的訪問this , 所以就沒有必要在去加next ,(官網(wǎng)意思就是這個)

結(jié)尾:

vue2和vue3的寫法基本一致沒有改變

到此這篇關(guān)于vue3中7種路由守衛(wèi)的使用大全的文章就介紹到這了,更多相關(guān)vue3路由守衛(wèi)使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論