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

vue3中7種路由守衛(wèi)的使用大全舉例

 更新時(shí)間:2023年03月30日 09:56:23   作者:囂張農(nóng)民  
最近在學(xué)習(xí)vue,感覺路由守衛(wèi)這個(gè)地方知識(shí)點(diǎn)挺多的,而且很重要,下面這篇文章主要給大家介紹了關(guān)于vue3中7種路由守衛(wèi)的使用大全,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

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

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

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

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

from:從當(dāng)前哪個(gè)路由進(jìn)行跳轉(zhuǎn)

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

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

案例:

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

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

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

全局前置守衛(wèi)

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

2.代碼:

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

3.例子:做登錄判斷

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

全局后置守衛(wèi)

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

2.代碼:

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

全局解析守衛(wèi)

1.使用方式:main.js中配置,這個(gè)鉤子和beforeEach類似,也是路由跳轉(zhuǎn)前觸發(fā),區(qū)別是在導(dǎo)航被確認(rèn)之前,同時(shí)在所有組件內(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)有個(gè)三個(gè):路由進(jìn)入之前beforeRouteEnter,路由離開時(shí)beforeRouteLeave,頁面更新時(shí)beforeRouteUpdate

  • beforeRouteEnter(to, from, next)

1.使用方式:在組件模板中使用,跟methods: {}等同級(jí)別書寫,組件路由守衛(wèi)是寫在每個(gè)單獨(dú)的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: {}等同級(jí)別書寫,組件路由守衛(wèi)是寫在每個(gè)單獨(dú)的vue文件里面的路由守衛(wèi)

2.代碼:

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

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

2.代碼:

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

路由獨(dú)享守衛(wèi)

路由獨(dú)享守衛(wèi)只有一個(gè):進(jìn)入路由時(shí)觸發(fā)beforeEnter

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

1.使用方式:在router.js中使用,路由獨(dú)享守衛(wèi)是在路由配置頁面單獨(dú)給路由配置的一個(gè)守衛(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ǔ)充:下面在看看三個(gè)組件內(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ù)訪問實(shí)例
     // 在渲染該組件的對(duì)應(yīng)路由被驗(yàn)證前調(diào)用
    // 不能獲取組件實(shí)例 `this` !
    // 因?yàn)楫?dāng)守衛(wèi)執(zhí)行時(shí),組件實(shí)例還沒被創(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ù)用時(shí)調(diào)用
    // 舉例來說,對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 `/users/:id`,在 `/users/1` 和 `/users/2` 之間跳轉(zhuǎn)的時(shí)候,
    // 由于會(huì)渲染同樣的 `UserDetails` 組件,因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。
    // 因?yàn)樵谶@種情況發(fā)生的時(shí)候,組件已經(jīng)掛載好了,導(dǎo)航守衛(wèi)可以訪問組件實(shí)例 `this`
    window.console.log(this)
    window.console.log(to)
    window.console.log(from)
},
beforeRouteLeave(to ,from){
    // 無 next
    // 在導(dǎo)航離開渲染該組件的對(duì)應(yīng)路由時(shí)調(diào)用
    // 與 `beforeRouteUpdate` 一樣,它可以訪問組件實(shí)例 `this`
    window.console.log(this)
    window.console.log(to)
    window.console.log(from)
},
}

解析 : 這三個(gè)差不多就放在一起還有個(gè)對(duì)照

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

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

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

結(jié)尾:

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

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

相關(guān)文章

最新評(píng)論