Vue Router 路由动态缓存组件

这篇文章距离上次修改已过439天，其中的内容可能已经有所变动。




<template>
  <div id="app">
    <keep-alive :include="includedComponents">
      <router-view/>
    </keep-alive>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  computed: {
    includedComponents() {
      // 根据当前路由的meta属性中的keepAlive字段决定缓存哪些组件
      const name = this.$route.meta.keepAlive;
      return Array.isArray(name) ? name : name ? [name] : [];
    }
  }
}
</script>

这段代码示例展示了如何根据Vue Router的当前路由的meta字段来动态决定哪些组件需要被<keep-alive>包裹以保持其状态。这是一个在单页应用中管理缓存组件状态的常见需求。

Vue Router 路由动态缓存组件

评论已关闭

推荐阅读