vue-router重寫push方法,解決相同路徑跳轉(zhuǎn)報錯問題
更新時間：2020年08月07日 08:41:10 作者：jkdgvse
這篇文章主要介紹了vue-router重寫push方法,解決相同路徑跳轉(zhuǎn)報錯問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
修改vue-router的配置文件，默認(rèn)位置router/index.js
import Vue from 'vue'
import Router from 'vue-router'
/**
* 重寫路由的push方法
* 解決，相同路由跳轉(zhuǎn)時，報錯
* 添加，相同路由跳轉(zhuǎn)時，觸發(fā)watch (針對el-menu，僅限string方式傳參，形如"view?id=5")
*/
// 保存原來的push函數(shù)
const routerPush = Router.prototype.push
// 重寫push函數(shù)
Router.prototype.push = function push(location) {
// 這個if語句在跳轉(zhuǎn)相同路徑的時候，在路徑末尾添加新參數(shù)（一些隨機(jī)數(shù)字）
// 用來觸發(fā)watch
if(typeof(location)=="string"){
var Separator = "&";
if(location.indexOf('?')==-1) { Separator='?'; }
location = location + Separator + "random=" + Math.random();
}
// 這個語句用來解決報錯
// 調(diào)用原來的push函數(shù)，并捕獲異常
return routerPush.call(this, location).catch(error => error)
}
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
}
]
})
補(bǔ)充知識：vue router-link 路徑變化 頁面內(nèi)容不變
在VUE項目中有碰到過，vue 同一 路由頁面 用router-link 或者 router.push（） 訪問同一路由頁面，出現(xiàn)url地址有變化，但是頁面內(nèi)容沒有變化，沒有重新加載信息
解決方案如下
<router-link to="/home" @click.native="flushCom">首頁</router-link>
<script>
export default {
...
...
methods:{
flushCom:function(){
//router是路由實例,例如:var router = new Router({})
//router.go(n)是路由的一個方法，意思是在history記錄中前進(jìn)或者后退多少步，0就表示還是當(dāng)前，類似window.history.go(n)
this.$router.go(0);
}
}
}
<script>
等于在router 鏈接 觸發(fā)后 再通過click 時間 刷新本頁面
以上這篇vue-router重寫push方法,解決相同路徑跳轉(zhuǎn)報錯問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中用js如何實現(xiàn)循環(huán)可編輯表格
這篇文章主要介紹了vue中用js如何實現(xiàn)循環(huán)可編輯表格，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue.js 中的 v-cloak 指令及使用詳解，通過案例給大家簡單介紹了vue中v-cloak的使用，感興趣的朋友跟隨小編一起看看吧2018-11-11
vue項目中echarts自適應(yīng)問題的高級解決過程
雖然老早就看過很多echarts的例子,但自己接觸的項目中一直都沒有真正用到過,直到最近才開始真正使用,下面這篇文章主要給大家介紹了關(guān)于vue項目中echarts自適應(yīng)問題的高級解決過程,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了vue3+vite動態(tài)引入圖片方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vue中可編輯樹狀表格的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10
移動端滑動切換組件封裝 vue-swiper-router實例詳解
這篇文章主要介紹了移動端滑動切換組件封裝 vue-swiper-router實例詳解,需要的朋友可以參考下2018-11-11
VUE 配置vue-devtools調(diào)試工具及安裝方法
vue-devtools是一款基于chrome瀏覽器的插件，用于vue應(yīng)用的調(diào)試，這款vue調(diào)試神器可以極大地提高我們的調(diào)試效率。幫助我們快速的調(diào)試開發(fā)vue應(yīng)用。這篇文章主要介紹了VUE 配置vue-devtools調(diào)試工具及安裝步驟 ,需要的朋友可以參考下2018-09-09
本文主要介紹了Vue3里的EffectScope，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
最近做項目需要實現(xiàn)世界地圖,本文主要介紹了Vue3+echarts繪制世界地圖的示例代碼,具有一定的參考價值,感謝的可以了解一下2024-03-03
webpack+vue+express(hot)熱啟動調(diào)試簡單配置方法
今天小編就為大家分享一篇webpack+vue + express (hot) 熱啟動調(diào)試簡單配置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09