How to use route navigation guards to control route jumps in Vue

In Vue, routing is a very important part, which controls jumps and navigation between pages. In actual development, we often need to control certain routes, for example, access can only be done when logged in or administrator rights are required for access, etc. At this time, you need to use routing navigation guards to implement routing control.

Route navigation guards can intercept route jumps and perform some operations before or after route jumps. In Vue, routing navigation guards are usually implemented using global navigation guards and intra-component navigation guards. Below we will introduce how to use these two methods respectively.

1. Global Navigation Guard

Global navigation guard can control global routing and is usually registered in the Vue instance. The global navigation guard contains three hook functions:

1. beforeEach(to, from, next)

This function is executed before the route jumps, and it receives three parameters:

• to: The routing object that is about to jump
• from: The routing object that is currently jumping
• next: Callback function, which can be used to control routing jumps

In the beforeEach function, we can judge the route. If the conditions are met, continue to jump. Otherwise, use the next method to intercept or redirect. For example, to determine whether to log in:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !store.state.isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

2. afterEach(to, from)

This function is executed after the route jumps. It receives two parameters:

• to: The routing object that just jumped to
• from: The routing object that just left

In the afterEach function, we can process the route, such as recording access Records etc.

router.afterEach((to, from) => {
  // 记录访问记录
})

3. resolve(to, from, next)

This function can define a hook function in the routing configuration to handle asynchronous routing jumps.

For example:

{
  path: '/dashboard',
  component: Dashboard,
  beforeEnter: (to, from, next) => {
    if (store.state.isAdmin) {
      next()
    } else {
      next('/login')
    }
  }
}

When using global navigation guards, it should be noted that if multiple guards are executed, the next method needs to be used to control the order of execution.

2. Navigation guard within the component

The navigation guard within the component uses two functions, beforeRouteEnter and beforeRouteLeave, to implement routing control.

1. beforeRouteEnter(to, from, next)

This function is executed before the component is instantiated. It receives three parameters:

• to: The routing object that is about to jump
• from: The routing object that is currently jumping
• next: Callback function, used to control routing jumps

in In the beforeRouteEnter function, since the component has not been instantiated, the this object cannot be directly accessed, so the next method needs to be used to pass a callback function, which is executed after the component is instantiated.

For example, we can use this function to create dynamic routes:

{
  path: '/user/:id',
  component: User,
  beforeEnter: (to, from, next) => {
    api.getUser(to.params.id)
      .then(user => {
        to.meta.user = user
        next()
      })
      .catch(error => {
        next('/error')
      })
  }
}

2. beforeRouteLeave(to, from, next)

This function is in Executed before the component leaves, it receives three parameters:

• to: the routing object that is about to jump
• from: the routing object that is currently jumping
• next : Callback function, used to control route jump

In the beforeRouteLeave function, we can process the current component, such as saving data or prompting the user, etc.

For example, we can prompt the user whether to save data before leaving the page:

beforeRouteLeave(to, from, next) {
  if (this.formDirty) {
    if (confirm('您是否要保存数据？')) {
      this.saveData()
      next()
    } else {
      next(false)
    }
  } else {
    next()
  }
}

When using the navigation guard within the component, it should be noted that if multiple guards are executed, the next method needs to be used. to control the order of execution.

In summary, routing navigation guards are a very important part of Vue, which can help us flexibly control routing. In actual development, we need to choose an appropriate way to use routing navigation guards based on business needs, so as to achieve refined control of routing and improve user experience.

The above is the detailed content of How to use route navigation guards to control route jumps in Vue. For more information, please follow other related articles on the PHP Chinese website!