How to solve the problem "Error: Redirected when going from "xxx" to "yyy" via a navigation guard" when using vue-router in a Vue application?

How to solve the problem "Error: Redirected when going from "xxx" to "yyy" via a navigation guard" when using vue-router in a Vue application?

Vue is a popular JavaScript framework that makes building interactive web applications easier. Vue Router is the official router of Vue. It is the core plug-in that handles navigation and routing in Vue applications. However, when using vue-router, a common error sometimes occurs: "Error: Redirected when going from "xxx" to "yyy" via a navigation guard". This error makes beginners very confused. So, this article will introduce the causes and solutions of this error.

Cause of error

When using vue-router, we often use routing guards to control users' permissions when accessing certain pages. For example, we can use route guards to redirect users to the login page when they are not logged in. However, when using route guards, the following error sometimes occurs:

Error: Redirected when going from "xxx" to "yyy" via a navigation guard

The reason for this error is because we used the beforeEach() method to redirect the user, but we did not "redirect" handle the situation appropriately. If we redirect the user, then we must let Vue Router know this fact, otherwise Vue Router will think that we did not redirect.

Solution

To solve this error, we need to make appropriate modifications to the way routing guards are used. Here are some possible solutions:

1. Use next(false)

When we use next(false), it means that we want to terminate the route without doing anything Redirect. So, if we use next(false) in beforeEach(), then we can avoid this error.

For example, we can modify the routing guard like this:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login') //重定向到登录页
  } else {
    next(false) //终止路由
  }
})

2. Use next({ path: '/login' })

When we use next ({ path: '/login' }), this means that we want to redirect the user to the specified path (here /login). This way, Vue Router knows that we redirected.

For example, we can modify the routing guard like this:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ path: '/login' }) //重定向到登录页
  } else {
    next() //正常路由
  }
})

3. Use next({ name: 'login' })

When we use next( { name: 'login' }), this means we want to redirect the user to the route with the specified name. This name is the route name defined in Vue Router.

For example, we can define a route with the name "login" like this:

const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login
  }
]

Then, we can modify the route guard like this:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ name: 'login' }) //重定向到具有名称“login”的路由
  } else {
    next() //正常路由
  }
})

Summary

When using Vue Router, we need to understand how to use route guards, which can help us control user access permissions and redirect users to specified pages. However, when using route guards, the error "Error: Redirected when going from "xxx" to "yyy" via a navigation guard" sometimes occurs. At this time, we need to make appropriate modifications to the way the routing guard is used, such as using next(false), next({ path: '/login' }), or next({ name: 'login' }), etc., so This error can be avoided.

The above is the detailed content of How to solve the problem "Error: Redirected when going from "xxx" to "yyy" via a navigation guard" when using vue-router in a Vue application?. For more information, please follow other related articles on the PHP Chinese website!