vue-router - Navigation cancelled from "/" to "/password" with a new navigation

Question

Trying to navigate to password page, vue-router throwing this error

Uncaught (in promise) Error: Navigation cancelled from "/" to "/password" with a new navigation.

Navigating to password page is successfully redirected but not sure why this error is throwing. I didnt observe this error before.

Vue router version: [email protected]

On click on a button doing this.$router.push({name: 'password', query: {username: this.username}})

In router/index.js

{
path: '/',
component: loginComponent,
children: [
  {
    path: '/',
    alias: '/login',
    name: 'login',
    component: () => import('../views/email.vue')
  },
  {
    path: 'password',
    name: 'password',
    component: () => import('../views/password.vue')
  }
]

}

Answer 1

I recently got the same error. this is happening because vue router can't redirect twice (that means you can't redirect in a redirected route). this is mentioned in the documentation

Make sure that the next function is called exactly once in any given pass through the navigation guard. It can appear more than once, but only if the logical paths have no overlap, otherwise the hook will never be resolved or produce errors.

I have a workaround for it which is to create a hidden vue-route component with the route you want to redirect to and then click.

example:

<router-link ref="redirect" :to="$route.query.redirect ? $route.query.redirect : '/'"></router-link>

and when you want to redirect (maybe in your case after the user enters the password) you can just trigger a click event on this link

this.$refs.redirect.$el.click()

Answer 2

You should add a catch() to catch such errors:

this.$router.push({
  name: 'password', 
  query: {
    username: this.username
  }
}).catch();

More information is available in the VueRouter documentation.