keep-alive

最新推荐文章于 2024-10-09 15:30:02 发布

哪吒U

最新推荐文章于 2024-10-09 15:30:02 发布

阅读量111

点赞数

本文链接：https://blog.csdn.net/weixin_50580285/article/details/117449496

版权

keep-alive的生命周期

初次进入时：created > mounted > activated；退出后触发 deactivated
再次进入：会触发 activated；事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中

`案例:`

更改App.vue

<div id="app" class='wrapper'>
    <keep-alive>
        <!-- 需要缓存的视图组件 --> 
        <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive>
      <!-- 不需要缓存的视图组件 -->
     <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

在路由中设置keep-alive

{
  path: 'list',
  name: 'itemList', // 商品管理
  component (resolve) {
    require(['@/pages/item/list'], resolve)
 },
 meta: {
  keepAlive: true,
  title: '商品管理'
 }
}

更改beforeEach的钩子
第一步，先清理无用的页面缓存，假设现在有A、B两个页面都开启的缓存：

若第一次进入A页面后退出，再次进入页面时，页面不会刷新。
在进入过A页面后进入B页面，经过测试后发现，B页面竟然会显示A页面的缓存，尽管url已经改变

为了解决这个问题，判断页面是前进还是后退，代码如下：

let toDepth = to.path.split('/').length
let fromDepth = from.path.split('/').length
if (toDepth < fromDepth) {
  // console.log('back...')
  from.meta.keepAlive = false
  to.meta.keepAlive = true
}

记录页面滚动的位置

keep-alive并不会记录页面滚动位置，所以我们要记录当前滚动位置，再触发activated钩子时重新定位到原有位置，例如：

在deactivated钩子中记录当前滚动位置，使用localStorage：

deactivated () {
 window.localStorage.setItem(this.key, JSON.stringify({
 listScrollTop: this.scrollTop
 }))
}

在activated钩子中滚动：

this.cacheData = window.localStorage.getItem(this.key) ？JSON.parse(window.localStorage.getItem(this.key)) : null
$('.sidebar-item').scrollTop(this.cacheData.listScrollTop)