欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2020年08月07日 08:41:10   作者：jkdgvse  
這篇文章主要介紹了vue-router重寫push方法,解決相同路徑跳轉(zhuǎn)報(bào)錯(cuò)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

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

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

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

在VUE項(xiàng)目中有碰到過，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是路由實(shí)例,例如:var router = new Router({})
  //router.go(n)是路由的一個(gè)方法，意思是在history記錄中前進(jìn)或者后退多少步，0就表示還是當(dāng)前，類似window.history.go(n)
 this.$router.go(0); 
 }
}
}
<script>

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

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

相關(guān)文章

  • vue中用js如何實(shí)現(xiàn)循環(huá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 指令及使用詳解

    這篇文章主要介紹了Vue.js 中的 v-cloak 指令及使用詳解，通過案例給大家簡(jiǎn)單介紹了vue中v-cloak的使用，感興趣的朋友跟隨小編一起看看吧
    2018-11-11
  • vue項(xiàng)目中echarts自適應(yīng)問題的高級(jí)解決過程

    vue項(xiàng)目中echarts自適應(yīng)問題的高級(jí)解決過程

    雖然老早就看過很多echarts的例子,但自己接觸的項(xiàng)目中一直都沒有真正用到過,直到最近才開始真正使用,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中echarts自適應(yīng)問題的高級(jí)解決過程,需要的朋友可以參考下
    2023-05-05
  • vue3+vite動(dòng)態(tài)引入圖片方式

    vue3+vite動(dòng)態(tài)引入圖片方式

    這篇文章主要介紹了vue3+vite動(dòng)態(tài)引入圖片方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-06-06
  • vue中可編輯樹狀表格的實(shí)現(xiàn)代碼

    vue中可編輯樹狀表格的實(shí)現(xiàn)代碼

    這篇文章主要介紹了vue中可編輯樹狀表格的實(shí)現(xiàn)代碼,本文通過實(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í)例詳解

    這篇文章主要介紹了移動(dòng)端滑動(dòng)切換組件封裝 vue-swiper-router實(shí)例詳解,需要的朋友可以參考下
    2018-11-11
  • VUE 配置vue-devtools調(diào)試工具及安裝方法

    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

    深入理解Vue3里的EffectScope

    本文主要介紹了Vue3里的EffectScope，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • Vue3+echarts繪制世界地圖的示例代碼

    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)單配置方法

    今天小編就為大家分享一篇webpack+vue + express (hot) 熱啟動(dòng)調(diào)試簡(jiǎn)單配置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09

最新評(píng)論