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