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種路由守衛如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！