• notice
  • Congratulations on the launch of the Sought Tech site

NavigationDuplicated problem is solved when vue-router repeats push

When we were learning vue-routerprogrammatic navigation, we found that if you repeatedly click a button to trigger a page jump, the following "NavigationDuplicated" error will appear.Here I will paste part of my code first:

// Menu button in template
< button @click = "toBlog" >Blog</ button >
 
// The jump method of the corresponding click event
toBlog (){
    this . $router . push ( "/blog" );
}
 
// Routing configuration
{
    name : "Blog" ,
    path : "/blog" ,
    component :()=> import ( '@/components/Blog.vue' )
}

If you click the blog button several times in a row, the following error will appear:

NavigationDuplicated: Avoided redundant navigation to current location: “/blog”.


NavigationDuplicated problem is solved when vue-router repeats push
Although it has no effect on the operation of the code, it still looks very uncomfortable!

1.The cause of the problem:


Repeat the route jump, our current route is the blog page /blog, but then click the blog button to this.$router.pushoperate, the page to jump to is the /blogblog page.

2.There are two solutions:


1) Upgrade vue-router version to 3.0 to solve it, open the project terminal and run the following command:

npm i vue - router@3 . 0 - S

2) Modify VueRouterthe pushmethod on the prototype object and add the following code below the code in the routerfolder :index.jsVue.use(VueRouter)

//Get the push function on the prototype object
const originalPush = VueRouter . prototype . push 
//Modify the push method in the prototype object
VueRouter . Prototype . Push = function push ( location ) {  
  return originalPush . call ( this , location ). catch ( err => err )
}


Tags

Technical otaku

Sought technology together

Related Topic

1 Comments

author

atorvastatin brand & lt;a href="https://lipiws.top/"& gt;lipitor 20mg for sale& lt;/a& gt; lipitor 40mg usa

Ytuutg

2024-03-10

Leave a Reply

+