How to solve Avoided redundant navigation to current location error in vue?

Question

I am new in vue and i got the error after user logged in and redirect to another route. Basically i am a PHP developer and i use laravel with vue. Please help me to solve this error.

Uncaught (in promise) Error: Avoided redundant navigation to current location: "/admin".

Here is the screenshot too

Vue Code

 methods: {         loginUser() {             var data = {                 email: this.userData.email,                 password: this.userData.password             };             this.app.req.post("api/auth/authenticate", data).then(res => {                 const token = res.data.token;                 sessionStorage.setItem("chatbot_token", token);                 this.$router.push("/admin");             });         }     } 

Vue Routes

const routes = [     {         path: "/admin",         component: Navbar,         name: "navbar",         meta: {             authGuard: true         },         children: [             {                 path: "",                 component: Dashboard,                 name: "dashboard"             },             {                 path: "users",                 component: Users,                 name: "user"             }         ]     },     {         path: "/login",         component: Login,         name: "login"     } ];  const router = new VueRouter({     routes,     mode: "history" });  router.beforeEach((to, from, next) => {     const loggedInUserDetail = !!sessionStorage.getItem("chatbot_token");     if (to.matched.some(m => m.meta.authGuard) && !loggedInUserDetail)         next({ name: "login" });     else next(); });  

Answer 1

As I remember well, you can use catch clause after this.$router.push. Then it will look like:

this.$router.push("/admin").catch(()=>{}); 

This allows you to only avoid the error displaying, because browser thinks the exception was handled.

Answer 2

I don't think suppressing all errors from router is good practice, I made just picks of certain errors, like this:

router.push(route).catch(err => {     // Ignore the vuex err regarding  navigating to the page they are already on.     if (       err.name !== 'NavigationDuplicated' &&       !err.message.includes('Avoided redundant navigation to current location')     ) {       // But print any other errors to the console       logError(err);     }   });