vue跳转实现页面缓存

Vue 实现页面缓存的方法

在 Vue 中，可以通过 keep-alive 组件结合路由配置实现页面缓存，提升用户体验和性能。

使用 keep-alive 缓存组件

在路由出口外包裹 keep-alive 组件，可以缓存所有匹配的组件实例：

<template>
  <div id="app">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

按需缓存特定页面

通过 include 或 exclude 属性指定需要缓存的组件名称：

<keep-alive include="Home,About">
  <router-view></router-view>
</keep-alive>

结合路由配置实现动态缓存

在路由元信息中设置 keepAlive 属性，动态决定是否缓存：

const routes = [
  {
    path: '/home',
    component: Home,
    meta: { keepAlive: true }
  },
  {
    path: '/about',
    component: About,
    meta: { keepAlive: false }
  }
]

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

使用生命周期钩子

被缓存的组件会触发 activated 和 deactivated 生命周期钩子，可以在这两个钩子中执行特定逻辑：

export default {
  activated() {
    // 组件被激活时调用
  },
  deactivated() {
    // 组件被停用时调用
  }
}

缓存滚动位置

在路由配置中启用 scrollBehavior 可以保存页面滚动位置：

const router = new VueRouter({
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})

清除特定组件缓存

通过 $destroy() 方法可以手动销毁缓存实例：

this.$refs.cacheComponent.$destroy()

以上方法可以根据实际需求组合使用，实现灵活的页面缓存策略。