頁面做tab切換，由于組件每一次切換都會重新實例化組件，我們想要頁面不論怎么切換都仍然保持tab里面的內容不會刷新，減少頁面重新渲染以及減少請求

實現方法：使用包裹組件

列表頁面跳轉詳情 ，列表頁面保持上一次操作狀態

通過是否加載router-view 和路由元meta設置頁面是否需要緩存來實現

router-view嵌套多層的話，可能要設置多層，然后通過beforeRouteLeave監聽路由離開，設置是否緩存

//從其他頁面跳轉不需要緩存頁面 從詳情頁面回來則需要緩存

補充知識：vue 動態組件(tabs切換)keep-alive：主要用于保留組件狀態或避免重新渲染

通過keep-alive 保留數據值 填寫數據時切換到其他頁面，后返回當前頁數據保留 ，主要用于保留組件狀態或避免重新渲染

• 首頁
• 關于我們

關于我們數據

var vm=new Vue({

el:'.app',

data:{

currView:"home"

},

components:{

"home":{

template:"#homeTemp"

},

"abount":{

template:"#abountTemp"

}

}

});

以上這篇vue 實現tab切換保持數據狀態就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持聚米學院。

總結

以上是生活随笔為你收集整理的tab vue 竖排_vue 实现tab切换保持数据状态的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。