Vue 多级路由缓存失效的解决方案：一劳永逸！

前端

2023-10-05 02:50:12

Vue多级路由缓存机制：深度剖析

理解Vue多级路由的缓存机制

Vue中，通过在路由组件上添加keep-alive属性，可实现组件缓存。在路由切换时，缓存的组件并不会被销毁，而是保留在内存中。当用户再次访问该组件时，即可直接从缓存加载，提升页面加载速度。

分析多级路由缓存失效原因

在多级路由中，若父组件使用了keep-alive而子组件未用，则子组件缓存可能失效。这是因为父组件切换时，子组件也会被销毁，导致其缓存失效。

解决多级路由缓存失效的方法

解决此问题的方法包括：

1. 子组件也使用keep-alive

在需缓存的子组件中添加keep-alive属性即可。即使父组件切换，子组件也不会销毁，保证缓存不失效。

2. 使用路由守卫

路由守卫可在路由切换时执行操作。当父组件切换时，可在路由守卫中手动保存子组件缓存。再次访问子组件时，可直接从缓存加载，避免失效。

3. 使用组件生命周期钩子

组件生命周期钩子可在组件不同阶段执行操作。可在子组件的beforeRouteUpdate钩子中手动保存子组件缓存。再次访问子组件时，可直接从缓存加载，避免失效。

具体实现示例

在父组件使用keep-alive：

<template>
  <keep-alive>
    <router-view />
  </keep-alive>
</template>

在子组件也使用keep-alive：

<template>
  <keep-alive>
    <div>子组件内容</div>
  </keep-alive>
</template>

使用路由守卫：

router.beforeEach((to, from, next) => {
  if (to.path === '/parent/child' && from.path === '/parent') {
    // 保存子组件缓存
    const cache = router.app.$children[0].$children[0].cache
    router.app.$children[0].$children[0].cache = null
    next()
    router.app.$children[0].$children[0].cache = cache
  } else {
    next()
  }
})

使用组件生命周期钩子：

export default {
  beforeRouteUpdate() {
    // 保存子组件缓存
    this.cache = this.$vnode.componentInstance.cache
    this.$vnode.componentInstance.cache = null
  },
  updated() {
    // 恢复子组件缓存
    this.$vnode.componentInstance.cache = this.cache
  }
}