I have a view in my SPA that is loaded via vue router when a user types in a id in my sidebar. The component loads up and the prop is passed correctly through the route but if I type into the sidebar another id to load up I get this in console:
"vue-router.min.js:11 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/mainreview/search?id=1560".
My search functionality is using push() from a axios request to confirm that id exists and returns that as an array then pushes the component:
router.push({ path: '/mainreview/search', query: { mmcid: this.id[0].ID } });
My route is as follows:
{ path: '/mainreview/search', component: mainreview, props: route => ({ id: route.query.id })}
Most posts I have found on here seem to recommend suppressing the error but in my case I want it to reload the component so that the mount function inside the component runs again which is what triggers my an axios call with all my data.
If you only need an id and no other query param is needed, why don't just use it as url param?
{
path: '/mainreview/search/:id',
component: mainreview,
props: true
}
Then you can push
router.push({ path: '/mainreview/search', params: { id: this.id[0].ID } });