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

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

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

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

問題

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

可是?。。≡赼pp上的時(shí)候，它地址變了刷新不了?。?/p>

第一種方法

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

在app上地址更新但是不刷新?。。∪缓缶陀辛说诙N方法

第二種方法

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

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

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

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

原因

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

解決方案

在router的index.js中重寫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動態(tài)路由:路由參數(shù)改變,視圖不更新問題的解決
今天小編就為大家分享一篇vue動態(tài)路由:路由參數(shù)改變,視圖不更新問題的解決，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue 路由視圖 router-view嵌套跳轉(zhuǎn)的實(shí)現(xiàn)
這篇文章主要介紹了vue 路由視圖 router-view嵌套跳轉(zhuǎn)，主要實(shí)現(xiàn)的內(nèi)容有制作一個(gè)登錄頁面，跳轉(zhuǎn)到首頁，首頁包含菜單欄、頂部導(dǎo)航欄、主體，標(biāo)準(zhǔn)的后臺網(wǎng)頁格式，菜單點(diǎn)擊顯示不同的頁面，感興趣的小伙伴請參考下面文章內(nèi)容
2021-09-09
elementui實(shí)現(xiàn)預(yù)覽圖片組件二次封裝
這篇文章主要介紹了elementui實(shí)現(xiàn)預(yù)覽圖片組件二次封裝的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-12-12
完美解決axios在ie下的兼容性問題
下面小編就為大家分享一篇完美解決axios在ie下的兼容性問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
Vue.js中數(shù)組變動的檢測詳解
這篇文章給大家主要介紹了Vue.js中數(shù)組變動的檢測，文中給出了詳細(xì)的示例代碼和過程介紹，相信會對大家的理解和學(xué)習(xí)很有幫助，有需要的朋友們下面來一起看看吧。
2016-10-10
對vue下點(diǎn)擊事件傳參和不傳參的區(qū)別詳解
今天小編就為大家分享一篇對vue下點(diǎn)擊事件傳參和不傳參的區(qū)別詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
iview tabs 頂部導(dǎo)航欄和模塊切換欄的示例代碼
這篇文章主要介紹了iview tabs 頂部導(dǎo)航欄和模塊切換欄的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
vue虛擬化列表封裝的實(shí)現(xiàn)
這篇文章主要介紹了vue實(shí)現(xiàn)虛擬化列表封裝方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
Vue3封裝ant-design-vue表格的詳細(xì)代碼
這篇文章主要介紹了Vue3封裝ant-design-vue表格，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-05-05
如何使用vite搭建vue3項(xiàng)目詳解
Vite 是一個(gè)面向現(xiàn)代瀏覽器的更輕,更快的web應(yīng)用開發(fā)工具,下面這篇文章主要給大家介紹了關(guān)于如何使用vite搭建vue3項(xiàng)目的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07