快捷導(dǎo)航

vue-router重寫(xiě)push方法,解決相同路徑跳轉(zhuǎn)報(bào)錯(cuò)問(wèn)題

更新時(shí)間：2020年08月07日 08:41:10 作者：jkdgvse

這篇文章主要介紹了vue-router重寫(xiě)push方法,解決相同路徑跳轉(zhuǎn)報(bào)錯(cuò)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

修改vue-router的配置文件，默認(rèn)位置router/index.js

import Vue from 'vue'
import Router from 'vue-router'
 
/**
 * 重寫(xiě)路由的push方法
 * 解決，相同路由跳轉(zhuǎn)時(shí)，報(bào)錯(cuò)
 * 添加，相同路由跳轉(zhuǎn)時(shí)，觸發(fā)watch (針對(duì)el-menu，僅限string方式傳參，形如"view?id=5")
 */
 
// 保存原來(lái)的push函數(shù)
const routerPush = Router.prototype.push 
// 重寫(xiě)push函數(shù)
Router.prototype.push = function push(location) {
 
 // 這個(gè)if語(yǔ)句在跳轉(zhuǎn)相同路徑的時(shí)候，在路徑末尾添加新參數(shù)（一些隨機(jī)數(shù)字）
 // 用來(lái)觸發(fā)watch
 if(typeof(location)=="string"){
 var Separator = "&";
 if(location.indexOf('?')==-1) { Separator='?'; }
 location = location + Separator + "random=" + Math.random();
 }
 
 // 這個(gè)語(yǔ)句用來(lái)解決報(bào)錯(cuò)
 // 調(diào)用原來(lái)的push函數(shù)，并捕獲異常
 return routerPush.call(this, location).catch(error => error)
}
 
Vue.use(Router)
export default new Router({
 routes: [
 {
  path: '/',
 
 }
 ]
})

補(bǔ)充知識(shí)：vue router-link 路徑變化頁(yè)面內(nèi)容不變

在VUE項(xiàng)目中有碰到過(guò)，vue 同一路由頁(yè)面用router-link 或者 router.push（）訪(fǎng)問(wèn)同一路由頁(yè)面，出現(xiàn)url地址有變化，但是頁(yè)面內(nèi)容沒(méi)有變化，沒(méi)有重新加載信息

解決方案如下

<router-link to="/home" @click.native="flushCom">首頁(yè)</router-link>
<script>  
export default {
...
...
methods:{
 flushCom:function(){
 //router是路由實(shí)例,例如:var router = new Router({})
  //router.go(n)是路由的一個(gè)方法，意思是在history記錄中前進(jìn)或者后退多少步，0就表示還是當(dāng)前，類(lèi)似window.history.go(n)
 this.$router.go(0); 
 }
}
}
<script>

等于在router 鏈接觸發(fā)后再通過(guò)click 時(shí)間刷新本頁(yè)面

以上這篇vue-router重寫(xiě)push方法,解決相同路徑跳轉(zhuǎn)報(bào)錯(cuò)問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue中用js如何實(shí)現(xiàn)循環(huán)可編輯表格
這篇文章主要介紹了vue中用js如何實(shí)現(xiàn)循環(huán)可編輯表格，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue.js 中的 v-cloak 指令及使用詳解
這篇文章主要介紹了Vue.js 中的 v-cloak 指令及使用詳解，通過(guò)案例給大家簡(jiǎn)單介紹了vue中v-cloak的使用，感興趣的朋友跟隨小編一起看看吧
2018-11-11
vue項(xiàng)目中echarts自適應(yīng)問(wèn)題的高級(jí)解決過(guò)程
雖然老早就看過(guò)很多echarts的例子,但自己接觸的項(xiàng)目中一直都沒(méi)有真正用到過(guò),直到最近才開(kāi)始真正使用,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中echarts自適應(yīng)問(wèn)題的高級(jí)解決過(guò)程,需要的朋友可以參考下
2023-05-05
vue3+vite動(dòng)態(tài)引入圖片方式
這篇文章主要介紹了vue3+vite動(dòng)態(tài)引入圖片方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
vue中可編輯樹(shù)狀表格的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue中可編輯樹(shù)狀表格的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-10-10
移動(dòng)端滑動(dòng)切換組件封裝 vue-swiper-router實(shí)例詳解
這篇文章主要介紹了移動(dòng)端滑動(dòng)切換組件封裝 vue-swiper-router實(shí)例詳解,需要的朋友可以參考下
2018-11-11
VUE 配置vue-devtools調(diào)試工具及安裝方法
vue-devtools是一款基于chrome瀏覽器的插件，用于vue應(yīng)用的調(diào)試，這款vue調(diào)試神器可以極大地提高我們的調(diào)試效率。幫助我們快速的調(diào)試開(kāi)發(fā)vue應(yīng)用。這篇文章主要介紹了VUE 配置vue-devtools調(diào)試工具及安裝步驟 ,需要的朋友可以參考下
2018-09-09
深入理解Vue3里的EffectScope
本文主要介紹了Vue3里的EffectScope，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
Vue3+echarts繪制世界地圖的示例代碼
最近做項(xiàng)目需要實(shí)現(xiàn)世界地圖,本文主要介紹了Vue3+echarts繪制世界地圖的示例代碼,具有一定的參考價(jià)值,感謝的可以了解一下
2024-03-03
webpack+vue+express(hot)熱啟動(dòng)調(diào)試簡(jiǎn)單配置方法
今天小編就為大家分享一篇webpack+vue + express (hot) 熱啟動(dòng)調(diào)試簡(jiǎn)單配置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09