利用Vue中keep-alive，快速实现页面缓存

心已赠人 2022-12-24 00:52 135阅读 0赞

## keep-alive的生命周期 ##

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

## 项目实践 ##

**1.更改App.vue**

**2.在路由中设置keepAlive**

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

**3.更改 beforeEach钩子**

这一步是为了清空无用的页面缓存。 假设现在A、B两个页面都开启的缓存：
    
    若第一次进入A页面后退出，再次进入页面时，页面不会刷新。这和目前的业务逻辑不符。我们想要的结果是A页面前进后返回，页面保持不变，而不是退出后重新进入保持不变。
    在进入过A页面后进入B页面，经过测试后发现，B页面竟然会显示A页面的缓存，尽管url已经改变
    为了解决这个问题，需要判断页面是在前进还是后退。 在beforeEach钩子添加代码：

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
    }