解決Vue中使用keepAlive不緩存問題
1.查看app.vue文件,這個(gè)是重點(diǎn),不能忘記加(我就是忘記加了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.在需要緩存的頁(yè)面加入如下代碼
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 },
附上鉤子函數(shù)執(zhí)行順序:
不使用keep-alivebeforeRouteEnter --> created --> mounted --> destroyed
使用keep-alivebeforeRouteEnter --> created --> mounted --> activated --> deactivated再次進(jìn)入緩存的頁(yè)面,只會(huì)觸發(fā)beforeRouteEnter -->activated --> deactivated 。created和mounted不會(huì)再執(zhí)行。
總結(jié)
到此這篇關(guān)于Vue中使用keepAlive不緩存問題(已解決)的文章就介紹到這了,更多相關(guān)Vue使用keepAlive不緩存內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. 怎樣才能用js生成xmldom對(duì)象,并且在firefox中也實(shí)現(xiàn)xml數(shù)據(jù)島?2. 基于javaweb+jsp實(shí)現(xiàn)企業(yè)車輛管理系統(tǒng)3. 利用ajax+php實(shí)現(xiàn)商品價(jià)格計(jì)算4. ASP.Net MVC利用NPOI導(dǎo)入導(dǎo)出Excel的示例代碼5. jstl 字符串處理函數(shù)6. JSP動(dòng)態(tài)網(wǎng)頁(yè)開發(fā)原理詳解7. PHP中為什么使用file_get_contents("php://input")接收微信通知8. XML CDATA是什么?9. IOS蘋果AppStore內(nèi)購(gòu)付款的服務(wù)器端php驗(yàn)證方法(使用thinkphp)10. .Net core Blazor+自定義日志提供器實(shí)現(xiàn)實(shí)時(shí)日志查看器的原理解析
