Vue router FAQ

It is used to record Vue router bugs and common solutions encountered in work

Router.push reports an error, avoided redundant navigation to current location: “/xxx”

The main idea is that frequent route clicks lead to repeated routes. This error has no impact on the route jump function

Solution: override the push method

If you capture the exception, you will not report an error

let routerPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return routerPush.call(this, location).catch(err => err)
}

Click the route repeatedly to refresh the page effect

When rewriting the vuerouter.prototype.push method, compare the fullpath attribute in the currentroute object of vuerouter with the parameters of the push function to judge whether it is the same route. If yes, use the following method to complete the page refresh

Method 1: window. Location. Reload()

The problem is that it will refresh the whole page, which is not recommended

let routerPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {

  let history = this.currentRoute && this.currentRoute.fullPath;
  if (location === history) {
    window.location.reload();
  }
  return routerPush.call(this, location).catch(err => err)
}

Method 2: V-IF controls router view to realize local refresh

More complex, but can achieve local refresh

Since this in VueRouter.prototype.push points to the VueRouter instance
The reference property "app" (this.app) of the "global Vue instance" (generated by main.js new Vue()) exists in that instance

So, the push function can manipulate the Vue instance inside.

Realize thinking:

  The vue instance uses provide to inject a getRouterAlive method, which returns the state variable isRouterAlive defined in the current vue instance.
    Then define a reloadChild method to change the state variable isRouterAlive to false, and then change it to true after the dom update

  Where a local refresh is needed, inject accepts the method getRouterAlive and binds it to the router-view
    v-if="Object.prototype.toString.call(getRouterAlive) == '[object Function]' && getRouterAlive()"

Implementation code:

main.js

// main.js

new Vue({
  router,
  store,
  render: h => h(App),
  provide() {
    return {
      getRouterAlive: this.getRouterAlive,
    }
  },
  data: {
    isRouterAlive: true
  },
  methods: {
    getRouterAlive() {
      return this.isRouterAlive;
    },
    reloadChild() {
      this.isRouterAlive = false;

      this.$nextTick(() => {
        this.isRouterAlive = true;
      })
    }
  }
}).$mount('#app')

router.js

// router/index.js
let routerPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {

  let history = this.currentRoute && this.currentRoute.fullPath;
  if (location === history) {
    this.app.reloadChild && this.app.reloadChild();
  }
  return routerPush.call(this, location).catch(err => err)
}

Local refresh

...
<router-view v-if="Object.prototype.toString.call(getRouterAlive) == '[object Function]' && getRouterAlive()"></router-view>
...

inject: ["getRouterAlive"],
...