[Solved] Vue-router Error: Navigation cancelled from “/course“ to “/user“ with a new navigation.

This error occurs because a page appears in your Vue router global navigation guard, jumps to a page and then redirects to another interface

router.beforeEach((to,from,next)=>{
  if(to.matched.some(record => record.meta.requiresAuth)){
    if(!store.state.user){
      //Jump to the landing page
      next({
        name:'login',
        query:{//Pass the query string parameter via url
          redirect: to.fullPath//Tell the landing page the page that needs to be returned if the login is successful
        }
      })
    }else{
      next()
    }
  }else{
    next()
  }
  next()
})

If such code appears in Vue router, this error will occur. The solution is not to use multi-layer if and else

Read More: