Vue路由this.route.push跳轉(zhuǎn)頁面不刷新的解決方案
更新時間：2021年07月08日 11:01:07 作者：CoderYin
這篇文章主要介紹了Vue路由this.route.push跳轉(zhuǎn)頁面不刷新的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue路由this.route.push跳轉(zhuǎn)頁面不刷新
一、背景
介紹：在vue項目開發(fā)中，使用路由進(jìn)行頁面跳轉(zhuǎn)時，路由所跳轉(zhuǎn)的頁面不進(jìn)行刷新。
也就是vue生命周期函數(shù)沒有執(zhí)行(created、mounted鉤子函數(shù))。
案例：
A頁面：
B頁面：
問題：
當(dāng)在A頁面第一點擊按鈕到B頁面時，一切正常，當(dāng)返回到A頁面再次點擊按鈕時，B頁面沒有執(zhí)行mounted鉤子函數(shù)，結(jié)果導(dǎo)致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)文章
這篇文章主要介紹了vue 實現(xiàn)剪裁圖片并上傳服務(wù)器功能，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-03-03
一文詳解Vue如何整合Echarts實現(xiàn)可視化界面
ECharts，縮寫來自Enterprise Charts，商業(yè)級數(shù)據(jù)圖表，一個純Javascript的圖表庫，可以流暢的運行在PC和移動設(shè)備上。本文將在Vue中整合Echarts實現(xiàn)可視化界面，感興趣的可以了解一下2022-04-04
在vue中，有時候你需要對data中的數(shù)據(jù)進(jìn)行處理，或者對抓取的數(shù)據(jù)進(jìn)行處理之后再掛載呈現(xiàn)到標(biāo)簽中，這時候你就需要計算屬性了，當(dāng)然看到這里你可能還是不了解那下面我舉幾個實例并附代碼解釋2023-03-03
這篇文章主要介紹了Vue?瀏覽器本地存儲,LocalStorage 和 SessionStorage 統(tǒng)稱為 WebStorage，存儲大小一般支持5mb左右，但是不同的瀏覽器也有區(qū)別，具體內(nèi)容介紹跟隨小編一起看看吧2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要為大家介紹了Vue中如何優(yōu)雅的捕獲 Promise 異常詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了vue仿element實現(xiàn)分頁器效果，實現(xiàn)思路是定一個值foldPage, 意為當(dāng)前最多顯示的標(biāo)簽數(shù),當(dāng)總頁數(shù)超過即顯示省略.省略分為左邊省略(folder1)和右邊省略(folder2)，具體實例代碼大家參考下本文2018-09-09
vue使用動態(tài)添加路由(router.addRoutes)加載權(quán)限側(cè)邊欄的方式
這篇文章主要介紹了vue使用動態(tài)添加路由(router.addRoutes)加載權(quán)限側(cè)邊欄的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vue修改props數(shù)據(jù)報錯的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了Vue.js之slot深度復(fù)制的相關(guān)資料，文中介紹的很詳細(xì)，對大家具有一定的參考價值，需要的朋友們來一起看看吧。2017-03-03