Vue路由this.route.push跳轉(zhuǎn)頁(yè)面不刷新的解決方案
Vue路由this.route.push跳轉(zhuǎn)頁(yè)面不刷新
一、背景
介紹：在vue項(xiàng)目開(kāi)發(fā)中，使用路由進(jìn)行頁(yè)面跳轉(zhuǎn)時(shí)，路由所跳轉(zhuǎn)的頁(yè)面不進(jìn)行刷新。
也就是vue生命周期函數(shù)沒(méi)有執(zhí)行(created、mounted鉤子函數(shù))。
案例：
A頁(yè)面：
B頁(yè)面：
問(wèn)題：
當(dāng)在A頁(yè)面第一點(diǎn)擊按鈕到B頁(yè)面時(shí)，一切正常，當(dāng)返回到A頁(yè)面再次點(diǎn)擊按鈕時(shí)，B頁(yè)面沒(méi)有執(zhí)行mounted鉤子函數(shù)，結(jié)果導(dǎo)致mounted函數(shù)中查詢方法不執(zhí)行。
二、解決方法：
1、使用activated:{}周期函數(shù)代替mounted:{}函數(shù)即可。
2、監(jiān)聽(tīng)路由
// 不推薦、用戶體驗(yàn)不好
watch: {
'$route' (to, from) {
// 路由發(fā)生變化頁(yè)面刷新
this.$router.go(0);
}
},
// 該方法會(huì)多一次請(qǐng)求
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ù)會(huì)消失
this.$router.push({path:"",query:{id:""}})
path和query搭配，刷新頁(yè)面參數(shù)不會(huì)消失，query中參數(shù)成了url中的一部分
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3 封裝 element-plus 圖標(biāo)選擇器實(shí)現(xiàn)步驟
這篇文章主要介紹了Vue3 封裝 element-plus 圖標(biāo)選擇器,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
vue前端測(cè)試開(kāi)發(fā)watch監(jiān)聽(tīng)data的數(shù)據(jù)變化
這篇文章主要為大家介紹了vue測(cè)試開(kāi)發(fā)watch監(jiān)聽(tīng)data的數(shù)據(jù)變化，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
vue3?+?element-plus?的?upload?+?axios?+?django?實(shí)現(xiàn)文件上
這篇文章主要介紹了vue3?+?element-plus?的?upload?+?axios?+?django?文件上傳并保存,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2024-01-01
Vue中的v-model綁定修飾符的實(shí)現(xiàn)原理
v-model 是Vue.js中的一個(gè)重要指令,通過(guò)它我們可以輕松實(shí)現(xiàn)數(shù)據(jù)的雙向綁定,本文介紹一些常用的 v-model 綁定修飾符,并解析它們的實(shí)現(xiàn)原理,感興趣的朋友一起看看吧2024-01-01
這篇文章主要為大家詳細(xì)介紹了Vue3和Vite的那些事，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
這篇文章主要介紹了vue3之聲明式和編程式導(dǎo)航,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
今天小編就為大家分享一篇使用淘寶鏡像cnpm安裝Vue.js的圖文教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
這篇文章主要介紹了JS數(shù)組Array常用方法匯總和實(shí)例,JavaScript創(chuàng)建數(shù)組的方式,找數(shù)組元素,數(shù)組去重,實(shí)現(xiàn)數(shù)組排序需要的朋友可以參考下2022-05-05
SpringBoot+Vue前后端分離，使用SpringSecurity完美處理權(quán)限問(wèn)題的解決方法
這篇文章主要介紹了SpringBoot+Vue前后端分離，使用SpringSecurity完美處理權(quán)限問(wèn)題,需要的朋友可以參考下2018-01-01
vue+element-ui+axios實(shí)現(xiàn)圖片上傳
這篇文章主要為大家詳細(xì)介紹了vue+element-ui+axios實(shí)現(xiàn)圖片上傳，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08