vue跳轉(zhuǎn)同一個(gè)路由參數(shù)不同的問(wèn)題

更新時(shí)間：2022年08月05日 16:01:45 作者：我的大樹(shù)

這篇文章主要介紹了vue跳轉(zhuǎn)同一個(gè)路由參數(shù)不同的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue跳轉(zhuǎn)同一個(gè)路由參數(shù)不同

問(wèn)題

vue項(xiàng)目同一個(gè)路由跳轉(zhuǎn)（路由不變，后面參數(shù)變化），第一次碰到這個(gè)問(wèn)題的時(shí)候，搜了很多文章，大約是第一種解決方案，很順利解決了。

可是?。?！在app上的時(shí)候，它地址變了刷新不了??！

第一種方法

window.location.href = 改變參數(shù)后的新地址
window.location.reload();

在app上地址更新但是不刷新?。?！然后就有了第二種方法

第二種方法

<router-view :key="$route.fullPath"/>

這樣可以在app上解決?。。?！沒(méi)有發(fā)現(xiàn)承載環(huán)境兼容性問(wèn)題

vue跳轉(zhuǎn)同一路由報(bào)錯(cuò)

vue中，如果跳轉(zhuǎn)同一個(gè)頁(yè)面路由，雖不會(huì)影響功能，但是會(huì)報(bào)錯(cuò)

原因

路由的push會(huì)向歷史記錄棧中添加一個(gè)記錄，同時(shí)跳轉(zhuǎn)同一個(gè)路由頁(yè)面，會(huì)造成一個(gè)重復(fù)的添加，導(dǎo)致頁(yè)面的報(bào)錯(cuò)

解決方案

在router的index.js中重寫(xiě)vue的路由跳轉(zhuǎn)push

const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
	return originalPush.call(this, location).catch(err => err);
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue使用xlsx插件導(dǎo)出excel文件的詳細(xì)指南
第三方庫(kù)xlsx提供了強(qiáng)大的功能來(lái)處理Excel文件,它可以簡(jiǎn)化導(dǎo)出Excel文件這個(gè)過(guò)程,下面小編就來(lái)為大家詳細(xì)講講Vue如何通過(guò)xlsx導(dǎo)出excel,需要的小伙伴可以了解下
2025-04-04
Vue利用computer解決單項(xiàng)數(shù)據(jù)流的問(wèn)題詳解
Vue 是一個(gè)非常流行和強(qiáng)大的前端框架，它讓我們可以用簡(jiǎn)潔和優(yōu)雅的方式來(lái)構(gòu)建用戶(hù)界面，今天我們來(lái)分享一個(gè) Vue 中非常經(jīng)典的問(wèn)題，也是一個(gè)非常實(shí)用的技巧，希望對(duì)大家有所幫助
2023-07-07
一文詳析vue3?Props的用法(父?jìng)髯?
這篇文章主要給大家介紹了關(guān)于vue3?Props的用法(父?jìng)髯?的相關(guān)資料,在Vue3中Props用于組件間數(shù)據(jù)傳遞,允許類(lèi)型檢查和默認(rèn)值設(shè)置,文中將用法介紹的非常詳細(xì),需要的朋友可以參考下
2024-10-10
Vue動(dòng)態(tài)組件component標(biāo)簽的用法大全
這篇文章主要介紹了Vue動(dòng)態(tài)組件component標(biāo)簽的用法,在Vue中，可以通過(guò)component標(biāo)簽的is屬性動(dòng)態(tài)指定標(biāo)簽，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-08-08
vue中路由跳轉(zhuǎn)不計(jì)入history的操作
這篇文章主要介紹了vue中路由跳轉(zhuǎn)不計(jì)入history的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09
Vue2.0基于vue-cli+webpack同級(jí)組件之間的通信教程(推薦)
下面小編就為大家?guī)?lái)一篇Vue2.0基于vue-cli+webpack同級(jí)組件之間的通信教程(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
Vuejs第一篇之入門(mén)教程詳解（單向綁定、雙向綁定、列表渲染、響應(yīng)函數(shù)）
組件（Component）是 Vue.js 最強(qiáng)大的功能之一。接下來(lái)給大家介紹vuejs單向綁定、雙向綁定、列表渲染、響應(yīng)函數(shù)的相關(guān)知識(shí)，非常不錯(cuò)，感興趣的朋友一起看看吧
2016-09-09
Vue移動(dòng)端下拉刷新組件的使用教程
這篇文章主要介紹了Vue移動(dòng)端下拉刷新組件的使用教程，每一次我在使用vant組件庫(kù)里面list組件和下拉刷新連在一起用的時(shí)候都會(huì)出現(xiàn)下拉刷新和列表下滑局部滾動(dòng)的沖突，這就很難受，這篇文章將解決它
2023-04-04
Vue.extend和VueComponent的關(guān)系源碼解析
這篇文章主要為大家詳解了Vue.extend和VueComponent的關(guān)系源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
一次Vue中computed沒(méi)有觸發(fā)的原因以及排查經(jīng)歷
這篇文章主要介紹了一次Vue中computed沒(méi)有觸發(fā)的原因以及排查經(jīng)歷,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11