vue 刷新之后 嵌套路由不變 重新渲染頁(yè)面的方法
解決嵌套路由刷新時(shí)，路由沒(méi)有變化，正常情況下頁(yè)面是不會(huì)重新渲染的
1、在router-view中加上條件渲染 v-if 默認(rèn)為true。讓它顯示出來(lái)
2、寫(xiě)寫(xiě)一個(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)文章
Vue使用JSEncrypt實(shí)現(xiàn)rsa加密及掛載方法
這篇文章主要介紹了Vue使用JSEncrypt實(shí)現(xiàn)rsa加密及掛載方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02
mockjs+vue頁(yè)面直接展示數(shù)據(jù)的方法
這篇文章主要介紹了mockjs+vue頁(yè)面直接展示數(shù)據(jù)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
vue2項(xiàng)目導(dǎo)出操作實(shí)現(xiàn)方法(后端接口導(dǎo)出、前端直接做導(dǎo)出)
這篇文章主要給大家介紹了關(guān)于vue2項(xiàng)目導(dǎo)出操作實(shí)現(xiàn)方法的相關(guān)資料,文中介紹的是后端接口導(dǎo)出、前端直接做導(dǎo)出,通過(guò)代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-05-05
VueAwesomeSwiper在VUE中的使用以及遇到的一些問(wèn)題
這篇文章主要介紹了VueAwesomeSwiper在VUE中的使用以及遇到的一些問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要為大家詳細(xì)介紹了Vue中的axios和proxy代理的相關(guān)知識(shí)，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，需要的可以參考一下2023-03-03
vue-router實(shí)現(xiàn)tab標(biāo)簽頁(yè)（單頁(yè)面）詳解
這篇文章主要為大家詳細(xì)介紹了vue-router實(shí)現(xiàn)tab標(biāo)簽頁(yè)的相關(guān)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了Vue2.0用戶權(quán)限控制解決方法以及源碼說(shuō)明，一起學(xué)習(xí)下。2017-11-11
這篇文章主要為大家詳細(xì)介紹了vue中組件之間相互通信傳值的幾種方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
Vue唯一可以更改vuex實(shí)例中state數(shù)據(jù)狀態(tài)的屬性對(duì)象Mutation的講解
今天小編就為大家分享一篇關(guān)于Vue唯一可以更改vuex實(shí)例中state數(shù)據(jù)狀態(tài)的屬性對(duì)象，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
keep-alive 是 Vue 內(nèi)置的一個(gè)組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染。這篇文章主要介紹了vue 指定組件緩存,需要的朋友可以參考下2018-04-04