報(bào)錯(cuò)提示

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

錯(cuò)誤原因

控制臺(tái)出現(xiàn)以上這種 Navigating to current location ("/path") is not allowed 時(shí)，是因?yàn)橹貜?fù)進(jìn)入了相同路由。

錯(cuò)誤演示

為了演示報(bào)錯(cuò)，用vue-cli重新構(gòu)建了一個(gè)新的項(xiàng)目，只編寫了一個(gè)按鈕一個(gè)input。
code：

<!-- vue模板代碼 -->
<div>
	<button @click="gotoHandle">測(cè)試路由跳轉(zhuǎn)</button>
	<input v-model="routeName">
<div>

// 路由跳轉(zhuǎn)代碼
export default {
  data() {
    return {
      routeName: ''
    }
  },
  methods: {
    gotoHandle() {
      this.$router.push({name: this.routeName})
    }
  }
}

動(dòng)圖演示

在重復(fù)進(jìn)入相同路由時(shí)（不論是通過路徑，還是路由名稱進(jìn)入），會(huì)提示不允許導(dǎo)航到當(dāng)前位置（path）， 就像上面的例子進(jìn)入路由名為About的路由時(shí)，提示的是path: "/about"，Navigating to current location ("/about") is not allowed。這是因?yàn)樘D(zhuǎn)的方法錯(cuò)誤時(shí)，未捕獲錯(cuò)誤處理，因此直接輸出了錯(cuò)誤信息。

解決方法

方法一

直接在跳轉(zhuǎn)報(bào)錯(cuò)的那個(gè)地方加上.catch(error => error)

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

方法二

為跳轉(zhuǎn)錯(cuò)誤的方法全局加上錯(cuò)誤捕獲。

import VueRouter from 'vue-router'

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

以上代碼在main.js，或者router/index.js 下執(zhí)行，以及new VueRouter之前之后都一樣。因?yàn)槭侵刂玫?code>VueRouter原型對(duì)象上的push事件，給原型對(duì)象的push事件添加上了捕獲異常，所以會(huì)通過原型鏈改變所有相關(guān)對(duì)象。

replace 方法重復(fù)跳轉(zhuǎn)錯(cuò)誤與上方類似，把push改成replace就好。

方法三

此方法為建議方法，建議優(yōu)化跳轉(zhuǎn)邏輯，避免重復(fù)跳轉(zhuǎn)相同路由。

到此這篇關(guān)于Vue-router不允許導(dǎo)航到當(dāng)前位置(/path)錯(cuò)誤原因以及修復(fù)方式的文章就介紹到這了,更多相關(guān)Vue-router 導(dǎo)航到當(dāng)前位置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論