vue 刷新之后 嵌套路由不變 重新渲染頁(yè)面的方法
解決嵌套路由刷新時(shí)，路由沒(méi)有變化，正常情況下頁(yè)面是不會(huì)重新渲染的
1、在router-view中加上條件渲染 v-if 默認(rèn)為true。讓它顯示出來(lái)
2、寫寫一個(gè)reload方法，在頁(yè)面刷新只有，點(diǎn)擊某個(gè)查詢條件的時(shí)候調(diào)用這個(gè)重載的方法
這是條件渲染變化了為false
在修改數(shù)據(jù)之后使用 $nextTick，
條件渲染變化了為true
則可以在回調(diào)中獲取更新后的 DOM
如果需要帶有查詢參數(shù)，可以用編程試導(dǎo)航，query來(lái)傳參，但是這種方式可能刷新之后會(huì)有問(wèn)題。
我的解決方法是在刷新之后點(diǎn)擊頁(yè)面中的某個(gè)條件的時(shí)候，將參數(shù)存在localstorage里面，這個(gè)時(shí)候執(zhí)行reload方法來(lái)重新加載路由。這樣無(wú)論路由變美變化頁(yè)面都會(huì)重新加載，再次加載數(shù)據(jù)。。
這樣還會(huì)有一個(gè)問(wèn)題，就在在頁(yè)面刷新的時(shí)候，查詢條件會(huì)重置，這樣存在localstorage里面的值也要清空。
解決方法就是監(jiān)聽(tīng)瀏覽器的刷新事件
window.onbeforeunload = function(event) {
sessionStorage.removeItem('querydataObj')
};
然后清除sessionstorage。
以上這篇vue 刷新之后 嵌套路由不變 重新渲染頁(yè)面的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
100行代碼實(shí)現(xiàn)vue表單校驗(yàn)功能(小白自編)
這篇文章主要介紹了使用100行代碼實(shí)現(xiàn)vue表單校驗(yàn)功能，本文通過(guò)實(shí)例截圖給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
關(guān)于vue的element-ui web端引入高德地圖并獲取經(jīng)緯度
這篇文章主要介紹了關(guān)于vue的element-ui web端引入高德地圖并獲取經(jīng)緯度,高德地圖首先要去申請(qǐng)key和密鑰,文中提供了部分實(shí)現(xiàn)代碼和解決思路,感興趣的朋友可以學(xué)習(xí)一下2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)列表固定列滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
vue中element 上傳功能的實(shí)現(xiàn)思路
這篇文章主要介紹了vue中element 的上傳功能的實(shí)現(xiàn)思路,本文大概通過(guò)兩種實(shí)現(xiàn)思路，具體內(nèi)容詳情大家跟隨腳本之家小編一起看看吧2018-07-07
VUE+SpringBoot實(shí)現(xiàn)分頁(yè)功能
這篇文章主要為大家詳細(xì)介紹了VUE+SpringBoot實(shí)現(xiàn)分頁(yè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
本篇文章主要介紹了詳解Vue.js分發(fā)之作用域槽，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
這篇文章主要介紹了關(guān)于路由重定向redirect的基本使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue3?el-table結(jié)合seamless-scroll實(shí)現(xiàn)表格數(shù)據(jù)滾動(dòng)的思路詳解
這篇文章主要介紹了vue3?el-table結(jié)合seamless-scroll實(shí)現(xiàn)表格數(shù)據(jù)滾動(dòng),創(chuàng)建兩個(gè)table，隱藏第一個(gè)table的body部分，這樣就能得到一個(gè)固定的head，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
Vue動(dòng)態(tài)創(chuàng)建注冊(cè)component的實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)創(chuàng)建注冊(cè)component的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
vue 運(yùn)用mock數(shù)據(jù)的示例代碼
本篇文章主要介紹了vue 運(yùn)用mock數(shù)據(jù)的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11