溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
修改vue-router的配置文件，默認位置router/index.js
import Vue from 'vue'
import Router from 'vue-router'
/**
* 重寫路由的push方法
* 解決，相同路由跳轉時，報錯
* 添加，相同路由跳轉時，觸發watch (針對el-menu，僅限string方式傳參，形如"view?id=5")
*/
// 保存原來的push函數
const routerPush = Router.prototype.push
// 重寫push函數
Router.prototype.push = function push(location) {
// 這個if語句在跳轉相同路徑的時候，在路徑末尾添加新參數（一些隨機數字）
// 用來觸發watch
if(typeof(location)=="string"){
var Separator = "&";
if(location.indexOf('?')==-1) { Separator='?'; }
location = location + Separator + "random=" + Math.random();
}
// 這個語句用來解決報錯
// 調用原來的push函數，并捕獲異常
return routerPush.call(this, location).catch(error => error)
}
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
}
]
})
補充知識：vue router-link 路徑變化 頁面內容不變
在VUE項目中有碰到過，vue 同一 路由頁面 用router-link 或者 router.push（） 訪問同一路由頁面，出現url地址有變化，但是頁面內容沒有變化，沒有重新加載信息
解決方案如下
<router-link to="/home" @click.native="flushCom">首頁</router-link>
<script>
export default {
...
...
methods:{
flushCom:function(){
//router是路由實例,例如:var router = new Router({})
//router.go(n)是路由的一個方法，意思是在history記錄中前進或者后退多少步，0就表示還是當前，類似window.history.go(n)
this.$router.go(0);
}
}
}
<script>
等于在router 鏈接 觸發后 再通過click 時間 刷新本頁面
以上這篇vue-router重寫push方法,解決相同路徑跳轉報錯問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
