vue同路由攜帶不同參數(shù)跳轉(zhuǎn)無法刷新的解決方案
更新時間：2025年12月06日 09:00:04 作者：音洛
在Vue中,當(dāng)使用同一路由攜帶不同參數(shù)跳轉(zhuǎn)時,組件會被復(fù)用,生命周期鉤子只會執(zhí)行一次,頁面不會刷新,可以通過監(jiān)聽路由參數(shù)變化、使用key屬性、在路由配置中使用beforeRouteUpdate守衛(wèi)或者使用vuex來管理路由參數(shù),從而實現(xiàn)頁面刷新的效果
vue同路由攜帶不同參數(shù)跳轉(zhuǎn)無法刷新
當(dāng)跳轉(zhuǎn)同一路由，攜帶不同參數(shù)時，組件會被復(fù)用，生命周期之前創(chuàng)建了一次，不會再次重新創(chuàng)建，因此頁面不會刷新。
可以考慮一下幾種解決方法
方法一
使用watch監(jiān)聽路由參數(shù)的變化，并在參數(shù)變化時手動執(zhí)行相應(yīng)的邏輯來實現(xiàn)刷新頁面的效果。
watch: {
$route(to, from) {
// 在這里根據(jù)參數(shù)的變化執(zhí)行刷新頁面的邏輯
}
}
方法二
使用key屬性給組件添加唯一標(biāo)識，當(dāng)路由參數(shù)發(fā)生變化時，通過修改key的值來重新渲染組件，從而達到刷新頁面的效果。
<router-view :key="$route.fullPath"></router-view>
方法三
當(dāng)一個組件復(fù)用時，傳遞的參數(shù)發(fā)生變化就會觸發(fā)這個鉤子函數(shù)，在路由配置中使用beforeRouteUpdate守衛(wèi)，該守衛(wèi)會在當(dāng)前路由更新時被調(diào)用，可以在守衛(wèi)中執(zhí)行刷新頁面的邏輯
beforeRouteUpdate(to, from, next) {
// 在這里執(zhí)行刷新頁面的邏輯
next();
}
方法四
可以考慮使用vuex來管理路由參數(shù)，在每次路由跳轉(zhuǎn)時將參數(shù)存儲到vuex中，在需要刷新頁面時，通過修改參數(shù)的值來觸發(fā)刷新。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實現(xiàn)未登錄跳轉(zhuǎn)到登錄頁面的方法
這篇文章主要介紹了vue實現(xiàn)未登錄跳轉(zhuǎn)到登錄頁面的方法，主要目的是實現(xiàn)未登錄跳轉(zhuǎn)，需要的朋友參考下吧2018-07-07
這篇文章主要介紹了vue關(guān)于頁面刷新的幾個方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vue3.0 搭建項目總結(jié)(詳細步驟),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vuex 在Vue 組件中獲得Vuex 狀態(tài)state的方法
今天小編就為大家分享一篇Vuex 在Vue 組件中獲得Vuex 狀態(tài)state的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)可編輯的表格，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
Vue3表單組件el-form校驗規(guī)則rules屬性示例詳解
在el-form中正確使用rules校驗是非常重要的,rules使用不當(dāng)容易出現(xiàn)規(guī)則不生效、規(guī)則一直被觸發(fā)等各種現(xiàn)象,這篇文章主要給大家介紹了關(guān)于Vue3表單組件el-form校驗規(guī)則rules屬性的相關(guān)資料,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了Vue EventBus自定義組件事件傳遞，組件化應(yīng)用構(gòu)建是Vue的特點之一，本文主要介紹EventBus進行數(shù)據(jù)消息傳遞 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
vue style屬性設(shè)置背景圖片的相對路徑無效的解決
這篇文章主要介紹了vue style屬性設(shè)置背景圖片的相對路徑無效的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
iview+vue實現(xiàn)導(dǎo)入EXCEL預(yù)覽功能
這篇文章主要為大家詳細介紹了iview+vue實現(xiàn)導(dǎo)入EXCEL預(yù)覽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
SpringBoot+Vue前后端分離，使用SpringSecurity完美處理權(quán)限問題的解決方法
這篇文章主要介紹了SpringBoot+Vue前后端分離，使用SpringSecurity完美處理權(quán)限問題,需要的朋友可以參考下2018-01-01