建网站可以铺货,wordpress大学模板,铜川建设网站,网站开发注意问题文章目录 keep-alive多级页面缓存实现只适用于页面是否缓存状态不变的情况对于上面的问题提供一种解决方案 keep-alive多级页面缓存实现
只适用于页面是否缓存状态不变的情况
网上有一种很普遍的教程#xff0c;不使用keep-alive的include属性#xff0c;而是通过在路由表中… 文章目录 keep-alive多级页面缓存实现只适用于页面是否缓存状态不变的情况对于上面的问题提供一种解决方案 keep-alive多级页面缓存实现
只适用于页面是否缓存状态不变的情况
网上有一种很普遍的教程不使用keep-alive的include属性而是通过在路由表中添加meta: { keepAlive: true}通过v-if判断是否使用keep-alive
keep-aliverouter-view v-if$route.meta.keepAlive/router-view
/keep-alive
router-view v-if!$route.meta.keepAlive/router-view这种写法只适用于页面是否缓存的状态不变的情况
现实中遇到的场景是有三个页面总览页、列表页、详情页三个页面逐级跳转总览页 - 列表页 - 详情页。因为列表页是分页懒加载的用户希望可以从详情页返回时可以直接定位到之前的位置
因此要实现的实际上为页面缓存记录滚动条位置这里先看页面缓存
网上很多教程的写法是在列表页使用beforeRouteLeave动态设置keepAlive的值
// 列表页
beforeRouteLeave(to, from, next) {if (to.name 详情页) {from.meta.keepAlive true; } else {from.meta.keepAlive false;this.$destroy();}next();
},乍一看没什么问题到详情页的时候将keepAlive设为true进行缓存返回到总览页的时候设置为false取消缓存但仔细想一下这样写是晚一步的是否缓存在刚进入页面时就定下来了在beforeRouteLeave的时候修改keepAlive相当于修改的是下次进入页面时是否缓存
实际流程会变为
理想状态下
总览页 此时列表页路由的keepAlive默认为true 点击进入列表页
列表页 点击进入详情页 此时会缓存列表页keepAlive仍为true
详情页 返回列表页 获取缓存
这部分流程没有问题接下来
列表页 返回总览页 列表页被销毁keepAlive变为false
总览页 点击进入列表页 列表页keepAlive为false
这次列表页将不会被缓存此时已经出现问题那我们是不是可以不设置from.meta.keepAlive false;只在返回时销毁keep-alive的缓存此时又出现了一个新的问题在使用this.$destroy();销毁组件后会导致缓存异常回退时不使用缓存的列表页而是创建了个新的并且会一直缓存。详情可以百度this.$destroy()导致keep-alive缓存异常
Referencevue-router时 keep-alive 页面缓存问题解决 - 知乎
调用$destroy后组件生命周期出现异常。 · Issue #6961 · vuejs/vue · GitHub
所以要实现类似功能就使用include和exclude很多帖子纯纯的坑
对于上面的问题提供一种解决方案
还是对需要缓存的路由添加meta: { keepAlive: true}
维护一个页面栈将访问过的页面添加进去如果当前进入的页面在之前访问过代表是回退操作则将页面栈中在本页面之后的数据删除使用include记得要给组件添加name
templatediv idappkeep-alive :includecachePageListrouter-view/router-view/keep-alive/div
/template
scriptexport default {data(){return {pageRouteList: [] // 访问过的页面栈}},computed: {cachePageList(){// 缓存只取页面栈中router设置了keepAlive的return this.pageRouteList.filter(route route.meta.keepAlive).map(route route.name)}},watch: {$route(to, from) {const index this.pageRouteList.findIndex(route route.fullPath to.fullPath)const isVisited index ! -1if (!isVisited) {this.pageRouteList.push(to)} else {this.pageRouteList.splice(index 1)}}}}
/script
