How to use 7 types of routing guards in vue3

What types of routing guards are there?

Routing guards (navigation guards) are divided into three types: global guards (3), route-exclusive guards (1), component guards (3)

Three types of routing guards Parameters

to: the target route to jump to

from: which current route to jump from

next: no blocking, direct access

Note: You must ensure that the next function is called once in any given navigation guard. It can appear multiple times, but only when all logical paths do not overlap, otherwise an error will be reported.

Case:

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

1. Global routing guard

There are three global routing guards: global front guard, global post guard, and global parsing guard

Global front guard

1. How to use: configured in main.js, triggered before the route jumps. This hook is mainly used for login verification, that is, the route has not yet been Notify the jump in advance, so as not to notify it too late after the jump

2. Code:

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

3. Example: Make login judgment

router.beforeEach((to,from,next)=>{
  if(to.path == '/login' || to.path == '/register'){
    next();
  }else{
    alert('您还没有登录，请先登录');
    next('/login');
  }
})

Global post-position Guard

1. How to use: Configure in main.js. Contrary to beforeEach, it is triggered after the route jump is completed. It occurs after beforeEach and beforeResolve and before beforeRouteEnter (guard within the component). The hook will not accept the next function nor change the navigation itself

2. Code:

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

Global parsing guard

1. Usage: Configure in main.js, this The hook is similar to beforeEach, and is also triggered before the route jumps. The difference is that it is called before the navigation is confirmed, and after the guards and asynchronous routing components in all components are parsed, that is, after beforeEach and beforeRouteEnter in the component, and before afterEach.

2. Code:

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

1. Guards within the component

There are three guards within the component: beforeRouteEnter before the route enters, beforeRouteLeave when the route leaves, page When updating beforeRouteUpdate

• beforeRouteEnter(to, from, next)

1. How to use: Use in component template, followed by methods: {} is written at the same level. The component route guard is the route guard written in each separate vue file

2. Code:

beforeRouteEnter(to, from, next) {
    // 在组件生命周期beforeCreate阶段触发
    console.log('组件内路由前置守卫 beforeRouteEnter', this) // 访问不到this
    next((vm) => {
      console.log('组件内路由前置守卫 vm', vm) // vm 就是this
    })
  },

beforeRouteUpdate(to, from, next)

1. Usage: Used in component templates, written at the same level as methods: {}, component routing guards are routing guards written in each separate vue file

2. Code :

beforeRouteUpdate (to, from, next) {
    // 同一页面，刷新不同数据时调用，
    // 可以访问组件实例 
}

• beforeRouteLeave(to, from, next)

1. How to use: Use in component template, with methods: {} Written at the same level, component route guards are route guards written in each separate vue file

2. Code:

beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例
}

Route exclusive guard

There is only one route exclusive guard: triggered when entering the route beforeEnter

• Route exclusive guard beforeEnter(to, from, next)

1. How to use: Use in router.js. The route exclusive guard is a guard configured separately for the route on the routing configuration page.

2. Code

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

Navigation parsing process

1. Trigger entry into other routes
2. Call the component guard to leave the route beforeRouteLeave
3. Call the global front guard beforeEach
4. Call beforeRouteUpdate
in the reused component. 5. Call beforeEnter
on a single route in the routing configuration. 6. Parse the asynchronous routing component
7. Call beforeRouteEnter in the routing component that is about to enter. 8. Call the global The parsing guard beforeResolve
9. Navigation is confirmed
10. Call the global post hook afterEach
11. Trigger DOM update mounted
12. Execute the callback function passed to next in the beforeRouteEnter guard

The above is the detailed content of How to use 7 types of routing guards in vue3. For more information, please follow other related articles on the PHP Chinese website!