解決Vue中使用keepAlive不緩存問題
1.查看app.vue文件,這個是重點,不能忘記加(我就是忘記加了keep-alive)
<template> <div> <keep-alive><router-view v-if='$route.meta.keepAlive'></router-view> </keep-alive> <router-view v-if='!$route.meta.keepAlive'></router-view> </div></template>
2.查看router.js
{ path:’/loanmessage’, component:loanmessage, name:’loanmessage’, meta: { keepAlive: true, //代表需要緩存 isBack: false, },
3.在需要緩存的頁面加入如下代碼
beforeRouteEnter(to, from, next) { if (from.name == ’creditInformation’ || from.name == ’cityList’) { to.meta.isBack = true; } next();},activated() { this.getData() this.$route.meta.isBack = false this.isFirstEnter = false },
附上鉤子函數執行順序:
不使用keep-alivebeforeRouteEnter --> created --> mounted --> destroyed
使用keep-alivebeforeRouteEnter --> created --> mounted --> activated --> deactivated再次進入緩存的頁面,只會觸發beforeRouteEnter -->activated --> deactivated 。created和mounted不會再執行。
總結
到此這篇關于Vue中使用keepAlive不緩存問題(已解決)的文章就介紹到這了,更多相關Vue使用keepAlive不緩存內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網!
相關文章:
1. 低版本IE正常運行HTML5+CSS3網站的3種解決方案2. jsp實現局部刷新頁面、異步加載頁面的方法3. xml文件的結構解讀第1/2頁4. Jsp中request的3個基礎實踐5. python GUI庫圖形界面開發之PyQt5計數器控件QSpinBox詳細使用方法與實例6. 使用python修改文件并立即寫回到原始位置操作(inplace讀寫)7. python GUI庫圖形界面開發之PyQt5工具欄控件QToolBar的詳細使用方法與實例8. Python填充任意顏色,不同算法時間差異分析說明9. Java map.getOrDefault()方法的用法詳解10. 什么是python的id函數
