Menu
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(); }); 
520
You can use $router. push({ name: "yourroutename"}) or just router. push("yourroutename") now to redirect.
To reload a route with Vue Route, we can call the this. $router.go() method. If it has no arguments, then it'll reload the current route. This way, it'll notice when the path changes and it'll trigger a reload of the component with new data.
Access a route parameter with the $route instance object The Vue router gives us access to the $route instance object. On this object is the params property that we can use to access the parameter from the URL. The property name has to be the same as the one we define in the route path.
Vue router: Vue Router helps link between the browser's URL/History and Vue's components allowing for certain paths to render whatever view is associated with it. A vue router is used in building single-page applications (SPA). The vue-router can be set up by default while creating your new project.
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.
61
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); } }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
