Vue路由this.route.push跳轉(zhuǎn)頁面不刷新的解決方案
Vue路由this.route.push跳轉(zhuǎn)頁面不刷新
一、背景
介紹:在vue項目開發(fā)中,使用路由進行頁面跳轉(zhuǎn)時,路由所跳轉(zhuǎn)的頁面不進行刷新。
也就是vue生命周期函數(shù)沒有執(zhí)行(created、mounted鉤子函數(shù))。
案例:
A頁面:
B頁面:
問題:
當在A頁面第一點擊按鈕到B頁面時,一切正常,當返回到A頁面再次點擊按鈕時,B頁面沒有執(zhí)行mounted鉤子函數(shù),結(jié)果導致mounted函數(shù)中查詢方法不執(zhí)行。
二、解決方法:
1、使用activated:{}周期函數(shù)代替mounted:{}函數(shù)即可。
2、監(jiān)聽路由
// 不推薦、用戶體驗不好 watch: { '$route' (to, from) { // 路由發(fā)生變化頁面刷新 this.$router.go(0); } },
// 該方法會多一次請求 watch: { '$route' (to, from) { // 在mounted函數(shù)執(zhí)行的方法,放到該處 this.qBankId = globalVariable.questionBankId; this.qBankName = globalVariable.questionBankTitle; this.searchCharpter(); } },
Vue this.$router.push路由跳轉(zhuǎn),刷新參數(shù)消失
this.$router.push({name:"",params:{id:""}})
name和params搭配刷新參數(shù)會消失
this.$router.push({path:"",query:{id:""}})
path和query搭配,刷新頁面參數(shù)不會消失,query中參數(shù)成了url中的一部分
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3 封裝 element-plus 圖標選擇器實現(xiàn)步驟
這篇文章主要介紹了Vue3 封裝 element-plus 圖標選擇器,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09vue前端測試開發(fā)watch監(jiān)聽data的數(shù)據(jù)變化
這篇文章主要為大家介紹了vue測試開發(fā)watch監(jiān)聽data的數(shù)據(jù)變化,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-05-05vue3?+?element-plus?的?upload?+?axios?+?django?實現(xiàn)文件上
這篇文章主要介紹了vue3?+?element-plus?的?upload?+?axios?+?django?文件上傳并保存,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01SpringBoot+Vue前后端分離,使用SpringSecurity完美處理權(quán)限問題的解決方法
這篇文章主要介紹了SpringBoot+Vue前后端分離,使用SpringSecurity完美處理權(quán)限問題,需要的朋友可以參考下2018-01-01vue+element-ui+axios實現(xiàn)圖片上傳
這篇文章主要為大家詳細介紹了vue+element-ui+axios實現(xiàn)圖片上傳,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-08-08