vue路由跳轉(zhuǎn)后刷新指定頁面的方法
做項(xiàng)目遇到一個(gè)坑：A頁面帶參跳轉(zhuǎn)到B頁面，第二次跳轉(zhuǎn)時(shí)的參數(shù)與第一次時(shí)的參數(shù)不同，但是后臺(tái)查詢時(shí)還是使用的第一次的參數(shù)。需要手動(dòng)刷新之后，才會(huì)使用第二次參數(shù)。
鑒于時(shí)間原因直接使用刷新頁面監(jiān)聽路由的方法。在準(zhǔn)備跳轉(zhuǎn)的A頁面添加路由跳轉(zhuǎn)監(jiān)聽事件，達(dá)到每次A頁面跳轉(zhuǎn)B頁面時(shí)，B頁面都會(huì)再次重新加載頁面。
添加完成后，A頁面跳轉(zhuǎn)B頁面，B頁面成功刷新。正當(dāng)我高興的以為又解決了一個(gè)bug時(shí)，突然發(fā)現(xiàn)我從A頁面跳轉(zhuǎn)到C頁面時(shí),C頁面竟然也在發(fā)生頁面刷新現(xiàn)象。當(dāng)時(shí)著實(shí)是將小主嚇了一大跳。要知道正是因?yàn)橐顚慍頁面的數(shù)據(jù)，才從A頁面跳轉(zhuǎn)到B頁面?，F(xiàn)在C頁面的數(shù)據(jù)填寫到一半，去A頁面查詢數(shù)據(jù)返回到C頁面，C頁面的數(shù)據(jù)一下子全給干沒了。那之后客戶使用后還不得把我的工資給干沒了。這種情況屬實(shí)不能發(fā)生，想想都有點(diǎn)可怕。
于是趕緊去找辦法，苦尋無果。想到 this.$router.go()是個(gè)方法，那我能不能看下this.$router里面都有什么屬性？果斷在B頁面打?。?/p>
window.console.log(this.$router)
結(jié)果：
發(fā)現(xiàn)在history.current屬性下面正好有當(dāng)前頁面的路徑、名字、請(qǐng)求參數(shù)，有了這些就好辦了。于是就有了這個(gè)：
Vue路由跳轉(zhuǎn)頁面并刷新頁面
watch監(jiān)測到路由發(fā)生跳轉(zhuǎn)時(shí)刷新一次頁面
watch: {
$route() {
location.reload();
},
},到此這篇關(guān)于vue路由跳轉(zhuǎn)后刷新指定頁面的方法的文章就介紹到這了,更多相關(guān)vue路由跳轉(zhuǎn)刷新指定頁面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vant組件中 dialog的確認(rèn)按鈕的回調(diào)事件操作
這篇文章主要介紹了vant組件中 dialog的確認(rèn)按鈕的回調(diào)事件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
淺析webpack-bundle-analyzer在vue-cli3中的使用
這篇文章主要介紹了webpack-bundle-analyzer在vue-cli3中的使用,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
vue2.0與bootstrap3實(shí)現(xiàn)列表分頁效果
這篇文章主要為大家詳細(xì)介紹了vue2.0與bootstrap3實(shí)現(xiàn)列表分頁效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了vue2-elementUI部分組件樣式修改,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
vue使用Echarts設(shè)置數(shù)據(jù)無效問題記錄及解決方法
這篇文章主要介紹了vue使用Echarts設(shè)置數(shù)據(jù)無效問題記錄,本文通過場景分析給大家分享解決方法，需要的朋友可以參考下2022-08-08
Vue.js的Mixins功能允許封裝可復(fù)用的組件選項(xiàng),實(shí)現(xiàn)代碼復(fù)用和模塊化,Mixins可以包含數(shù)據(jù)、方法、生命周期鉤子等組件選項(xiàng),使用時(shí),Mixins中的選項(xiàng)會(huì)被混入組件中,優(yōu)先級(jí)低于組件自身選項(xiàng),優(yōu)點(diǎn)包括代碼復(fù)用、高靈活性和簡單易用2024-09-09
詳解如何實(shí)現(xiàn)一個(gè)簡單的 vuex
本篇文章主要介紹了如何實(shí)現(xiàn)一個(gè)簡單的 vuex，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
下面小編就為大家分享一篇axios post提交formdata的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
el-select單選時(shí)選擇后輸入框的is-focus狀態(tài)并沒有取消問題解決
這篇文章主要給大家介紹了關(guān)于el-select單選時(shí)選擇后輸入框的is-focus狀態(tài)并沒有取消問題的解決過程,文中通過圖文以及代碼示例將解決的辦法介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
Vue3增加了很多讓人眼前一亮的特征,suspense 組件就是其中之一,對(duì)處理異步請(qǐng)求數(shù)據(jù)非常實(shí)用,下面這篇文章主要給大家介紹了關(guān)于Vue3中如何使用異步請(qǐng)求的相關(guān)資料,需要的朋友可以參考下2022-06-06