keep-alive不能缓存多层级路由菜单

简单来说，keep-alive是用来缓存组件实例的，而多层级路由菜单是通过动态加载组件来显示的。当我们进入了一个多层级路由页面，只有当前显示的组件会被缓存，子组件以及嵌套的所有组件都不会被缓存。因此，使用keep-alive来缓存多层级路由菜单是行不通的。

另外，keep-alive缓存的是组件实例，如果在组件中使用了Vuex或者其他状态管理器或者依赖于外部数据来渲染组件，那么缓存组件实例就可能出现问题。如果我们在一个被缓存的组件中修改了数据，那么下次进入该组件时，缓存的组件实例会简单地恢复到初始状态，而不会反映出我们在其它页面做的修改。

综上所述，我们需要根据具体的场景来选择使用keep-alive或者其他缓存方法，不能一概而论。对于多层级路由菜单，目前较好的解决方案是使用动态组件或异步组件来实现，这种方式可以在路由切换时动态加载组件，从而实现缓存效果。

相关问题

vue keep-alive不能缓存二层级路由(vue-router)菜单问题解决

Vue中的keep-alive组件可以用来缓存已经渲染过的组件，从而避免重复渲染。然而，当使用二层级路由（即嵌套的子路由）时，我们可能会遇到无法正确缓存子路由组件的问题。

在使用vue-router中的嵌套路由时，如果我们想要缓存二层级的菜单组件，我们需要在父路由的组件中添加keep-alive组件。例如，我们有一个父路由组件为A，它包含一个<router-view>来展示子路由组件，其中有一个子路由组件为B，我们想要缓存它。我们可以将keep-alive组件添加在A组件的外层，如下所示：

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

这样，无论我们在A组件和B组件之间切换，B组件都会被缓存，避免了重复渲染的问题。

然而，如果我们想要缓存二层级路由的菜单组件，我们需要做一些额外的处理。我们可以在A组件中使用<router-view>来展示菜单组件，并在父组件中添加keep-alive组件，如下所示：

<template>
  <div>
    <keep-alive>
      <router-view name="menu"></router-view>
    </keep-alive>
    <router-view></router-view>
  </div>
</template>

这样，菜单组件会被正确地缓存，并且在A组件中的其他子路由切换时保持缓存，解决了无法缓存二层级路由菜单的问题。

综上所述，使用Vue的keep-alive组件能够解决缓存二层级路由菜单的问题，我们只需要在父组件中添加keep-alive组件，并在父组件的模板中使用<router-view>来展示菜单组件即可。

keep-alive多级路由缓存该怎么实现呢

要实现 keep-alive 多级路由缓存，需要在父级路由中使用 keep-alive 组件，并在子级路由中设置 name 属性，以便 keep-alive 组件可以缓存子级路由对应的组件实例。同时，在子级路由对应的组件中也要添加 keep-alive 组件，以缓存子组件的状态。

下面是一个示例代码：

// 父级路由设置
<template>
  <div>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>

<script>
export default {
  name: 'Parent',
  components: {},
  data() {
    return {};
  },
  computed: {},
  methods: {}
};
</script>

// 子级路由设置
<template>
  <div>
    <keep-alive :include="cachedViews">
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'Child',
  components: {},
  data() {
    return {};
  },
  computed: {
    cachedViews() {
      const { meta } = this.$route;
      return meta && meta.keepAlive ? [meta.keepAlive] : [];
    }
  },
  methods: {}
};
</script>

// 路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'Parent',
      component: Parent,
      meta: {
        keepAlive: 'Parent'
      },
      children: [
        {
          path: '/child1',
          name: 'Child1',
          component: Child1,
          meta: {
            keepAlive: 'Child1'
          },
          children: [
            {
              path: '/grandchild1',
              name: 'Grandchild1',
              component: Grandchild1,
              meta: {
                keepAlive: 'Grandchild1'
              }
            },
            {
              path: '/grandchild2',
              name: 'Grandchild2',
              component: Grandchild2,
              meta: {
                keepAlive: 'Grandchild2'
              }
            }
          ]
        },
        {
          path: '/child2',
          name: 'Child2',
          component: Child2,
          meta: {
            keepAlive: 'Child2'
          }
        }
      ]
    }
  ]
});

在这个示例中，Parent 组件作为父级路由组件，使用了 keep-alive 组件来缓存子级路由对应的组件实例。而 Child 组件作为子级路由组件，则使用了自己的 keep-alive 组件来缓存子组件的状态。为了让 keep-alive 组件知道要缓存哪个组件，我们在 meta 属性中添加了一个 keepAlive 字段，用来标识组件的名称。