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