vue 页面缓存数据（keep-alive）

最新推荐文章于 2024-06-06 15:58:06 发布

邯郸达文西

最新推荐文章于 2024-06-06 15:58:06 发布

阅读量217

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45881304/article/details/129987908

版权

局部方法

  beforeRouteLeave(to, from, next) {
    const that = this
    if (to.path === "/index") { //需要缓存的页面
      from.meta.keepAlive = true
    } else {
      // from.meta.keepAlive = false
      const vnode = that.$vnode
      const parentVnode = vnode && vnode.parent
      if (
        parentVnode &&
        parentVnode.componentInstance &&
        parentVnode.componentInstance.cache
      ) {
        var key =
          vnode.key == null
            ? vnode.componentOptions.Ctor.cid +
            (vnode.componentOptions.tag
              ? `::${vnode.componentOptions.tag}`
              : '')
            : vnode.key
        var cache = parentVnode.componentInstance.cache
        var keys = parentVnode.componentInstance.keys

        if (cache[key]) {
          that.$destroy()
          // remove key
          if (keys.length) {
            var index = keys.indexOf(key)
            if (index > -1) {
              keys.splice(index, 1)
            }
          }

          cache[key] = null
        }
      }
    }
    next()
  }