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.
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);
}
});
Maybe this is happening because your are trying to route to the existing $route.matched.path.
For original-poster
You may want to prevent the error by preventing a route to the same path:
if (this.$route.path != '/admin') {
this.$router.push("/admin");
}
Generic solutions
You could create a method to check for this if you are sending dynamic routes, using one of several options
Easy: Ignore the error
Hard: Compare the $route.matched against the desired route
1. Ignore the error
You can catch the NavigationDuplicated exception and ignore it.
pushRouteTo(route) {
try {
this.$router.push(route);
} catch (error) {
if (!(error instanceof NavigationDuplicated)) {
throw error;
}
}
}
Although this is much simpler, it bothers me because it generates an exception.
2. Compare the $route.matched against the desired route
You can compare the $route.matched against the desired route
pushRouteTo(route) {
// if sending path:
if (typeof(route) == "string") {
if (this.$route.path != route) {
this.$router.push(route);
}
} else { // if sending a {name: '', ...}
if (this.$route.name == route.name) {
if ('params' in route) {
let routesMatched = true;
for (key in this.$route.params) {
const value = this.$route.params[key];
if (value == null || value == undefined) {
if (key in route.params) {
if (route.params[key] != undefined && route.params[key] != null) {
routesMatched = false;
break;
}
}
} else {
if (key in route.params) {
if (routes.params[key] != value) {
routesMatched = false;
break
}
} else {
routesMatched = false;
break
}
}
if (!routesMatched) {
this.$router.push(route);
}
}
} else {
if (Object.keys(this.$route.params).length != 0) {
this.$router.push(route);
}
}
}
}
}
This is obviously a lot longer but doesn't throw an error. Choose your poison.
Runnable demo
You can try both implementations in this demo:
const App = {
methods: {
goToPageCatchException(route) {
try {
this.$router.push(route)
} catch (error) {
if (!(error instanceof NavigationDuplicated)) {
throw error;
}
}
},
goToPageMatch(route) {
if (typeof(route) == "string") {
if (this.$route.path != route) {
this.$router.push(route);
}
} else { // if sending a {name: '', ...}
if (this.$route.name == route.name) {
if ('params' in route) {
let routesMatched = true;
for (key in this.$route.params) {
const value = this.$route.params[key];
if (value == null || value == undefined) {
if (key in route.params) {
if (route.params[key] != undefined && route.params[key] != null) {
routesMatched = false;
break;
}
}
} else {
if (key in route.params) {
if (routes.params[key] != value) {
routesMatched = false;
break
}
} else {
routesMatched = false;
break
}
}
if (!routesMatched) {
this.$router.push(route);
}
}
} else {
if (Object.keys(this.$route.params).length != 0) {
this.$router.push(route);
}
}
} else {
this.$router.push(route);
}
}
},
},
template: `
<div>
<nav class="navbar bg-light">
Catch Exception
Match Route
</nav>
<router-view></router-view>
</div>`
}
const Page1 = {template: `
<div class="container">
<h1>Catch Exception</h1>
<p>We used a try/catch to get here</p>
</div>`
}
const Page2 = {template: `
<div class="container">
<h1>Match Route</h1>
<p>We used a route match to get here</p>
</div>`
}
const routes = [
{ name: 'page1', path: '/', component: Page1 },
{ name: 'page2', path: '/page2', component: Page2 },
]
const router = new VueRouter({
routes
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app"></div>
Just to make this complete you can also compare the from and to route fullPaths and compare them against each other which seems to me a simple, valid and reusable solution.
Here is an example in a component method:
move(params){
// get comparable fullPaths
let from = this.$route.fullPath
let to = this.$router.resolve(params).route.fullPath
if(from === to) {
// handle any error due the redundant navigation here
// or handle any other param modification and route afterwards
return
}
// route as expected
this.$router.push(params)
}
If you wanna use that you just put your route params in it like this.move({ name: 'something' }). This is the easiest way to handle the duplicate route without running into try catch syntax. And also you can have that method exported in Vue.prorotype.$move = ... which will work across the whole application.
I found the solution by adding the following code to router.js:
import router from 'vue-router';
const originalPush = router.prototype.push
router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
Provide a Typescript solution
The idea is to overwrite the router.push function. You can handle (ignore) the error in one place, instead of writing catch everywhere to handle it.
This is the function to overwrite
export declare class VueRouter {
// ...
push(
location: RawLocation,
onComplete?: Function,
onAbort?: ErrorHandler
): void
}
Here is the code
// in router/index.ts
import Vue from 'vue';
import VueRouter, { RawLocation, Route } from 'vue-router';
Vue.use(VueRouter);
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location: RawLocation): Promise<Route> {
return new Promise((resolve, reject) => {
originalPush.call(this, location, () => {
// on complete
resolve(this.currentRoute);
}, (error) => {
// on abort
// only ignore NavigationDuplicated error
if (error.name === 'NavigationDuplicated') {
resolve(this.currentRoute);
} else {
reject(error);
}
});
});
};
// your router configs ...
you can define and use a function like this:
routerPush(path) {
if (this.$route.path !== path) {
this.$router.push(path);
}
}
It means - you want to navigate to a route that looks the same as the current one and Vue doesn’t want to trigger everything again.
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);
// Here you conditioally navigate to admin page to prevent error raised
if(this.$route.name !== "/admin") {
this.$router.push("/admin");
}
});
}
}
Clean solution ;)
Move the code to an util function. So you can replace all this.$router.push with it.
import router from '../router'; // path to the file where you defined
// your router
const goToRoute = (path) =>
if(router.currentRoute.fullPath !== path) router.push(path);
export {
goToRoute
}
In addition to the above mentioned solutions: a convenient way is to put this snippet in main.js to make it a global function
Vue.mixin({
/**
* Avoids redundand error when navigating to already active page
*/
routerPush(route) {
this.$router.push(route).catch((error) => {
if(error.name != "NavigationDuplicated") {
throw error;
}
})
},
})
Now you can call in any component:
this.routerPush('/myRoute')
Global solution
In router/index.js, after initialization
// init or import router..
/* ... your routes ... */
// error handler
const onError = (e) => {
// avoid NavigationDuplicated
if (e.name !== 'NavigationDuplicated') throw e
}
// keep original function
const _push = router.__proto__.push
// then override it
router.__proto__.push = function push (...args) {
try {
const op = _push.call(this, ...args)
if (op instanceof Promise) op.catch(onError)
return op
} catch (e) {
onError(e)
}
}
I have added the code below in the main.js file of my project and the error disappeared.
import Router from 'vue-router'
const routerPush = Router.prototype.push
Router.prototype.push = function push(location) {
return routerPush.call(this, location).catch(error => error)
};
I have experienced the same issue and when I looked for a solution I found .catch(() => {}) which is actually telling the browser that we have handled the error please don’t print the error in dev tools :) Hehehe Nice hack! but ignoring an error is not a solution I think. So what I did, I created a utility function that takes two parameters router, path, and compares it with the current route's path if both are the same it means we already on that route and it ignore the route change. So simple :)
Here is the code.
export function checkCurrentRouteAndRedirect(router, path) {
const {
currentRoute: { path: curPath }
} = router;
if (curPath !== path) router.push({ path });
}
checkCurrentRouteAndRedirect(this.$router, "/dashboard-1");
checkCurrentRouteAndRedirect(this.$router, "/dashboard-2");
I had this problem and i solve it like that.
by adding that in my router file
import Router from 'vue-router'
Vue.use(Router)
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
Short solution:
if (this.$router.currentRoute.name !== 'routeName1') {
this.$router.push({
name: 'routeName2',
})
}
Late to the party, but trying to add my 10 cents. Most of the answers- including the one which is accepted are trying to hide the exception without finding the root cause which causes the error. I did have the same issue in our project and had a feeling it's something to do with Vue/ Vue router. In the end I managed to prove myself wrong and it was due to a code segment we had in App.vue to replace the route in addition to the similar logic like you in the index.ts.
this.$router.replace({ name: 'Login' })
So try to do a search and find if you are having any code which calls $router.replace OR $router.push for the route you are worried about- "/admin". Simply your code must be calling the route more than once, not the Vue magically trying to call it more than once.
I guess this answer comes in super late. Instead of catching the error I looked for a way to prevent the error the come up. Therefore I've enhanced the router by an additional function called pushSave. Probably this can be done via navGuards as well
VueRouter.prototype.pushSave = function(routeObject) {
let isSameRoute = true
if (this.currentRoute.name === routeObject.name && routeObject.params) {
for (const key in routeObject.params) {
if (
!this.currentRoute.params[key] ||
this.currentRoute.params[key] !== routeObject.params[key]
) {
isSameRoute = false
}
}
} else {
isSameRoute = false
}
if (!isSameRoute) {
this.push(routeObject)
}
}
const router = new VueRouter({
routes
})
As you've probably realized this will only work if you provide a routeObject like
this.$router.pushSave({ name: 'MyRoute', params: { id: 1 } })
So you might need to enhance it to work for strings aswell
For components <router-link>
You can create a new component instead of <router-link>.
Component name: <to-link>
<template>
<router-link :to="to" :event="to === $route.path || loading ? '' : 'click'" :class="classNames">
<slot></slot>
</router-link>
</template>
<script>
export default {
name: 'ToLink',
props: {
to: {
type: [String, Number],
default: ''
},
classNames: {
type: String,
default: ''
},
loading: {
type: Boolean,
default: false
}
}
}
</script>
For bind:
import ToLink from '#/components/to-link'
Vue.component('to-link', ToLink)
For $router.push() need create global method.
toHttpParams(obj) {
let str = ''
for (const key in obj) {
if (str !== '') {
str += '&'
}
str += key + '=' + encodeURIComponent(obj[key])
}
return str
},
async routerPush(path, queryParams = undefined, params = undefined, locale = true) {
let fullPath = this.$route.fullPath
if (!path) {
path = this.$route.path
}
if (!params) {
params = this.$route.params
}
if (queryParams && typeof queryParams === 'object' && Object.entries(queryParams).length) {
path = path + '?' + this.toHttpParams(queryParams)
}
if (path !== fullPath) {
const route = { path, params, query: queryParams }
await this.$router.push(route)
}
}
I don't understand why they no longer handle this case internally, but this is what I have implemented in our app.
If you are already on the fullPath then dont bother pushing / replacing
const origPush = Router.prototype.push;
Router.prototype.push = function(to) {
const match = this.matcher.match(to);
// console.log(match.fullPath, match)
if (match.fullPath !== this.currentRoute.fullPath) {
origPush.call(this, to);
} else {
// console.log('Already at route', match.fullPath);
}
}
const origReplace = Router.prototype.replace;
Router.prototype.replace = function(to) {
const match = this.matcher.match(to);
// console.log(match.fullPath, match)
if (match.fullPath !== this.currentRoute.fullPath) {
origReplace.call(this, to);
} else {
// console.log('Already at route', match.fullPath);
}
}
you can add a random query parameter to push object like this:
this.$router.push({path : "/admin", query : { time : Date.now()} });
Trying to build my own form validation plugin (it's for learning purposes - so I don't use existing libraries).
So I created the following mixin:
export default {
beforeCreate() {
if (! this.$vnode || /^(keep-alive|transition|transition-group)$/.test(this.$vnode.tag)) {
return;
}
// create
this.$validator = new Instance();
// define computed
if (! this.$options.computed) {
this.$options.computed = {};
}
this.$options.computed['errors'] = function() {
return this.$validator.errors;
};
}
}
And loaded the mixin from the component (cause I don't want to see this anywhere):
export default {
name: "SignIn",
components: {
AppLayout,
TextField,
HelperText,
Button
},
mixins: [ValidateMixin]
}
Anyway, anytime input has changed - there is an event which tests the value and controls my errors bag:
export default class {
constructor() {
this.items = {};
}
first(name) {
if (name in this.items) {
return this.items[name][0];
}
return false;
}
add(name, errors) {
this.items[name] = errors;
}
remove(name) {
delete this.items[name];
}
has(name) {
return name in this.items;
}
all() {
return this.items;
}
}
I've bind HTML element (:invalid="errors.has('email')"), and with the devtools I can see the errors bag changing - but the binding is just doesn't work. The invalid property remains false no matter what I'm doing.
I do understand that in order to create reactive property, I've to handle this with getters/setters, but I'm a bit stuck with it.
I have a basic VueJS application with only one page.
It's not a SPA, and I do not use vue-router.
I would like to implement a button that when clicked executes the window.open() function with content from one of my Vue Components.
Looking at the documentation from window.open() I saw the following statement for URL:
URL accepts a path or URL to an HTML page, image file, or any other resource which is supported by the browser.
Is it possible to pass a component as an argument for window.open()?
I was able to use some insights from an article about Portals in React to create a Vue component which is able to mount its children in a new window, while preserving reactivity! It's as simple as:
<window-portal>
I appear in a new window!
</window-portal>
Try it in this codesandbox!
The code for this component is as follows:
<template>
<div v-if="open">
<slot />
</div>
</template>
<script>
export default {
name: 'window-portal',
props: {
open: {
type: Boolean,
default: false,
}
},
data() {
return {
windowRef: null,
}
},
watch: {
open(newOpen) {
if(newOpen) {
this.openPortal();
} else {
this.closePortal();
}
}
},
methods: {
openPortal() {
this.windowRef = window.open("", "", "width=600,height=400,left=200,top=200");
this.windowRef.addEventListener('beforeunload', this.closePortal);
// magic!
this.windowRef.document.body.appendChild(this.$el);
},
closePortal() {
if(this.windowRef) {
this.windowRef.close();
this.windowRef = null;
this.$emit('close');
}
}
},
mounted() {
if(this.open) {
this.openPortal();
}
},
beforeDestroy() {
if (this.windowRef) {
this.closePortal();
}
}
}
</script>
The key is the line this.windowRef.document.body.appendChild(this.$el); this line effectively removes the DOM element associated with the Vue component (the top-level <div>) from the parent window and inserts it into the body of the child window. Since this element is the same reference as the one Vue would normally update, just in a different place, everything Just Works - Vue continues to update the element in response to databinding changes, despite it being mounted in a new window. I was actually quite surprised at how simple this was!
You cannot pass a Vue component, because window.open doesn't know about Vue. What you can do, however, is to create a route which displays your component and pass this route's URL to window.open, giving you a new window with your component. Communication between the components in different windows might get tricky though.
For example, if your main vue is declared like so
var app = new Vue({...});
If you only need to render a few pieces of data in the new window, you could just reference the data model from the parent window.
var app1 = window.opener.app;
var title = app.title;
var h1 = document.createElement("H1");
h1.innerHTML = title;
document.body.appendChild(h1);
I ported the Alex contribution to Composition API and works pretty well.
The only annoyance is that the created window ignores size and position, maybe because it is launched from a Chrome application that is fullscreen. Any idea?
<script setup lang="ts">
import {ref, onMounted, onBeforeUnmount, watch, nextTick} from "vue";
const props = defineProps<{modelValue: boolean;}>();
const emit = defineEmits(["update:modelValue"]);
let windowRef: Window | null = null;
const portal = ref(null);
const copyStyles = (sourceDoc: Document, targetDoc: Document): void => {
// eslint-disable-next-line unicorn/prefer-spread
for(const styleSheet of Array.from(sourceDoc.styleSheets)) {
if(styleSheet.cssRules) {
// for <style> elements
const nwStyleElement = sourceDoc.createElement("style");
// eslint-disable-next-line unicorn/prefer-spread
for(const cssRule of Array.from(styleSheet.cssRules)) {
// write the text of each rule into the body of the style element
nwStyleElement.append(sourceDoc.createTextNode(cssRule.cssText));
}
targetDoc.head.append(nwStyleElement);
}
else if(styleSheet.href) {
// for <link> elements loading CSS from a URL
const nwLinkElement = sourceDoc.createElement("link");
nwLinkElement.rel = "stylesheet";
nwLinkElement.href = styleSheet.href;
targetDoc.head.append(nwLinkElement);
}
}
};
const openPortal = (): void => {
nextTick().then((): void => {
windowRef = window.open("", "", "width=600,height=400,left=200,top=200");
if(!windowRef || !portal.value) return;
windowRef.document.body.append(portal.value);
copyStyles(window.document, windowRef.document);
windowRef.addEventListener("beforeunload", closePortal);
})
.catch((error: Error) => console.error("Cannot instantiate portal", error.message));
};
const closePortal = (): void => {
if(windowRef) {
windowRef.close();
windowRef = null;
emit("update:modelValue", false);
}
};
watch(props, () => {
if(props.modelValue) {
openPortal();
}
else {
closePortal();
}
});
onMounted(() => {
if(props.modelValue) {
openPortal();
}
});
onBeforeUnmount(() => {
if(windowRef) {
closePortal();
}
});
</script>
<template>
<div v-if="props.modelValue" ref="portal">
<slot />
</div>
</template>
I'm writing a custom directive in vue.
I want it to work like v-if but it will have a little logic going inside it. Let me explain with an example:
<button v-permission="PermissionFoo">Do Foo</button>
It will check the permission and will show or hide the component.
Currently I'm doing this via CSS styles:
var processPermissionDirective = function (el, binding, vnode) {
if (SOME_LOGIC_HERE) {
el.style.display = el._display;
}
else {
el.style.display = 'none';
}
}
export default {
bind: function (el, binding, vnode) {
el._display = el.style.display;
processPermissionDirective(el, binding, vnode);
},
update: function (el, binding, vnode) {
processPermissionDirective(el, binding, vnode);
}
}
But I don't want this element to stay in the document. So I'm looking for another way other than CSS because it must be also removed from DOM like v-if does.
Try to use this hack:
Vue.directive('permission', (el, binding, vnode) => {
if (!isUserGranted(binding.value)) {
// replace HTMLElement with comment node
const comment = document.createComment(' ');
Object.defineProperty(comment, 'setAttribute', {
value: () => undefined,
});
vnode.elm = comment;
vnode.text = ' ';
vnode.isComment = true;
vnode.context = undefined;
vnode.tag = undefined;
vnode.data.directives = undefined;
if (vnode.componentInstance) {
vnode.componentInstance.$el = comment;
}
if (el.parentNode) {
el.parentNode.replaceChild(comment, el);
}
}
});
UPD 05-19-2017: My latest code. I define setAttribute() and check for vnode.componentInstance to prevent js errors when using with both html elements and Vue components.
For Vue 3, it's much simpler:
import { DirectiveBinding, VNode } from 'vue';
import { Meteor } from 'meteor/meteor';
export const VCan = function(el: HTMLElement, binding: DirectiveBinding, vNode: VNode) {
const behaviour = binding.modifiers.disable ? 'disable' : 'hide';
// #ts-ignore
const hasPermission = Roles.userIsInRole(Meteor.userId(), `${ binding.value }-${ binding.arg }`,
Meteor.user()?.profile.profile);
if (!hasPermission) {
if (behaviour === 'hide') {
// #ts-ignore
vNode.el.hidden = true;
} else if (behaviour === 'disable') {
// #ts-ignore
el.disabled = true;
}
}
};
Reference:
https://www.linkedin.com/pulse/vue-3-custom-directives-links-showhide-via-shahzad-ahmed/
I am trying to set the title, however in this code below it works in one place and doesnt in other place. I want to get the product name and set the title. Is there any other way to do it?
activate(params: any, route, navigationInstruction) {
//route.navModel.router.title="test"; //works here
this.api.pull<Product>([params.id]).then(items => {
items.forEach(item=>
{
if(item.id == params.id)
route.navModel.router.title = item.name //does NOT work here
});
});
}
Try using the setTitle method on the NavModel:
activate(params, routeConfig) {
return this.api.pull<Product>([params.id]).then((items) => {
let item = items.find((item) => item.id == params.id);
if (item) {
routeConfig.navModel.setTitle(item.name);
}
}
}
In the case above, you're pulling down a Product and then setting the page title to the item's name. In this use case, you'd likely want to set the navModel title. However, if you really want to change the Router title and not just the current navModel, you can do the following:
import { inject, Router } from 'aurelia-framework';
#inject(Router)
export class MyViewModel
constructor(router) {
this.router = router;
}
activate(params, routeConfig) {
return this.api.pull<Product>([params.id]).then((items) => {
let item = items.find((item) => item.id == params.id);
if (item) {
this.router.title = item.name;
this.router.updateTitle();
}
}
}
}
See more info in the Router docs.
Try to return promise from api call, looks like page title is set after activate hook, so you have to set route.navModel.router.title before activate hook finishes execution
activate(params: any, route, navigationInstruction) {
//route.navModel.router.title="test"; //works here
return this.api.pull<Product>([params.id]).then(items => {
items.forEach(item=>
{
if(item.id == params.id)
route.navModel.router.title = item.name //does NOT work here
});
});
}