vue 刷新之后 嵌套路由不變 重新渲染頁面的方法
解決嵌套路由刷新時，路由沒有變化，正常情況下頁面是不會重新渲染的
1、在router-view中加上條件渲染 v-if 默認(rèn)為true。讓它顯示出來
2、寫寫一個reload方法，在頁面刷新只有，點擊某個查詢條件的時候調(diào)用這個重載的方法
這是條件渲染變化了為false
在修改數(shù)據(jù)之后使用 $nextTick，
條件渲染變化了為true
則可以在回調(diào)中獲取更新后的 DOM
如果需要帶有查詢參數(shù)，可以用編程試導(dǎo)航，query來傳參，但是這種方式可能刷新之后會有問題。
我的解決方法是在刷新之后點擊頁面中的某個條件的時候，將參數(shù)存在localstorage里面，這個時候執(zhí)行reload方法來重新加載路由。這樣無論路由變美變化頁面都會重新加載，再次加載數(shù)據(jù)。。
這樣還會有一個問題，就在在頁面刷新的時候，查詢條件會重置，這樣存在localstorage里面的值也要清空。
解決方法就是監(jiān)聽瀏覽器的刷新事件
window.onbeforeunload = function(event) {
sessionStorage.removeItem('querydataObj')
};
然后清除sessionstorage。
以上這篇vue 刷新之后 嵌套路由不變 重新渲染頁面的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue使用JSEncrypt實現(xiàn)rsa加密及掛載方法
這篇文章主要介紹了Vue使用JSEncrypt實現(xiàn)rsa加密及掛載方法,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02
mockjs+vue頁面直接展示數(shù)據(jù)的方法
這篇文章主要介紹了mockjs+vue頁面直接展示數(shù)據(jù)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
vue2項目導(dǎo)出操作實現(xiàn)方法(后端接口導(dǎo)出、前端直接做導(dǎo)出)
這篇文章主要給大家介紹了關(guān)于vue2項目導(dǎo)出操作實現(xiàn)方法的相關(guān)資料,文中介紹的是后端接口導(dǎo)出、前端直接做導(dǎo)出,通過代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-05-05
VueAwesomeSwiper在VUE中的使用以及遇到的一些問題
這篇文章主要介紹了VueAwesomeSwiper在VUE中的使用以及遇到的一些問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要為大家詳細介紹了Vue中的axios和proxy代理的相關(guān)知識，文中的示例代碼講解詳細，具有一定的借鑒價值，需要的可以參考一下2023-03-03
vue-router實現(xiàn)tab標(biāo)簽頁（單頁面）詳解
這篇文章主要為大家詳細介紹了vue-router實現(xiàn)tab標(biāo)簽頁的相關(guān)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了Vue2.0用戶權(quán)限控制解決方法以及源碼說明，一起學(xué)習(xí)下。2017-11-11
這篇文章主要為大家詳細介紹了vue中組件之間相互通信傳值的幾種方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
Vue唯一可以更改vuex實例中state數(shù)據(jù)狀態(tài)的屬性對象Mutation的講解
今天小編就為大家分享一篇關(guān)于Vue唯一可以更改vuex實例中state數(shù)據(jù)狀態(tài)的屬性對象，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
keep-alive 是 Vue 內(nèi)置的一個組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染。這篇文章主要介紹了vue 指定組件緩存,需要的朋友可以參考下2018-04-04