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();
});
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.