编程知识 cdmana.com

Three methods to solve the problem of navigation duplicate in Vue router

The console will report [NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}]. And the reason is that Vue-router stay 3.1 After the $router.push() The method is changed to Promise. So if there's no callback function , The error message will be handed over to the global routing error handling , Therefore, the above mistakes will be reported .

vue-router Yes, I reported one first Uncaught (in promise) Error of ( because push No callbacks ), And then click on the route to trigger NavigationDuplicated Error of ( Routing error , Global error handling is printed out )

programme 1: Downsizing , Fix vue-router Version to 3.0.7 following .

npm i vue-router@3.0 -S

programme 2: Disable global routing error handling , This method is vue-router Of issues A big guy inside solved it

In the introduction of vue-router Add the following code to the file , Yes Router On the prototype chain push、replace Method , In this way, you don't have to add catch:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}

programme 3: Add a callback function for each ,vue-router The developers of the company have come up with solutions

版权声明
本文为[Leise-]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201225110220267p.html

Scroll to Top