Vue-router does not allow navigation to the current location (/path) Error reasons and fixes

Error message

Navigating to current location ("/path") is not allowed

Cause

When the console displays the above message Navigating to current location ("/path") is not allowed , it is because the same route is entered repeatedly.

Error demonstration

In order to demonstrate the error, a new project was rebuilt with vue-cli , and only one按鈕and one input were written.
code:

<!-- vue template code -->
<div>
	<button @click="gotoHandle">Test route jump</button>
	<input v-model="routeName">
<div>

// Routing code export default {
  data() {
    return {
      routeName: ''
    }
  },
  methods: {
    gotoHandle() {
      this.$router.push({name: this.routeName})
    }
  }
}

Animated demo

When you enter the same route repeatedly (whether by path or route name), you will be prompted that navigation to the current location ( path ) is not allowed. For example, in the example above, when entering the route named About , the prompt is path: "/about" and Navigating to current location ("/about") is not allowed. This is because when the jump method is wrong, the error handling is not captured, so the error information is directly output.

Workaround

Method 1

Add .catch(error => error) directly to the place where the error is reported

export default {
  data() {
    return {
      routeName: ''
    }
  },
  methods: {
    gotoHandle() {
      this.$router.push({name: this.routeName}).catch(error => error)
    }
  }
}

Method 2

Add global error capture to the method that jumps to the error.

import VueRouter from 'vue-router'

const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function (location) {
  return routerPush.call(this, location).catch(error => error)
}

The above code is the same when executed in main.js or router/index.js , and before and after new VueRouter . Because it is a push event on the reset VueRouter prototype object, a capture exception is added to push event of the prototype object, so all related objects will be changed through the prototype chain.

The duplicate jump error of the replace method is similar to the above. Just change push replace .

Method 3

This method is recommended. It is recommended to optimize the jump logic to avoid repeated jumps to the same route.

This is the end of this article about the error cause and fix of Vue-router not allowing navigation to the current location (/path). For more related Vue-router navigation to the current location content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!