vue3 <keep-alive>配置不同key值

Vue 3 中，<keep-alive> 组件的使用方式与 Vue 2 中基本相同，只是在使用 key 时有一些不同。

在 Vue 3 中，如果你在 <keep-alive> 中使用了 key，那么这个 key 值必须是一个函数，而不是一个字符串。这是因为 Vue 3 中对 key 值的处理方式有所改变，它不再支持字符串类型的 key，而是要求 key 值必须是一个函数，用来动态生成 key 值。

例如，我们可以这样在 <keep-alive> 中使用 key：

<keep-alive :key="route => route.fullPath">
  <router-view></router-view>
</keep-alive>

在这个例子中，我们使用了一个函数作为 key 值，这个函数接收一个 route 参数，返回这个路由的 fullPath 属性。这样做可以确保每个路由都有唯一的 key 值，从而避免了路由复用时可能出现的问题。

需要注意的是，在使用函数作为 key 值时，这个函数必须是纯函数，也就是说它不能有任何副作用，只能根据输入参数计算出一个唯一的输出值。这样才能保证每个 key 值都是唯一的，从而正确地触发组件的生命周期钩子函数。

相关问题

[Vue Router warn]: <router-view> can no longer be used directly inside <transition> or <keep-alive>. Use slot props instead:

Vue Router给出这个警告是因为在Vue 3中，`<router-view>`标签不再直接支持在`<transition>`或`<keep-alive>`标签内部使用。这是因为在之前的版本中，`<router-view>`默认会包裹在一个隐式的`v-if`指令里，这导致了与`<transition>`或`<keep-alive>`的动态渲染不兼容。

解决这个问题的方法是在`<transition>`或`<keep-alive>`内添加一个插槽（slot），并在插槽内使用`<router-view>`，并传递必要的slot prop。这样可以让你更好地控制路由视图的显示状态以及动画效果。例如：

<transition name="my-transition">
  <template #default>
    <router-view :key="$route.fullPath" />
  </template>
</transition>

<!-- 或者 -->

<keep-alive>
  <template v-slot="{ Component, route }">
    <Component :key="$route.fullPath" :route="route" />
  </template>
</keep-alive>

在这里，`:key="$route.fullPath"`用于避免多次渲染时的性能问题，`route` prop允许你在子组件中访问当前的路由信息。

<keep-alive> <router-view :key="$route.fullPath" :detail="resData" @reload="loadData" /> </keep-alive>

This code block represents a Vue.js component that uses a "keep-alive" tag to cache the component's state when it is not currently visible on the screen, and then use that cached state when it becomes visible again.

Within the "keep-alive" tag, there is a "router-view" tag that renders the current route's component, passing in the current route's full path as a prop, as well as a "detail" prop that is set to the "resData" object. Additionally, there is an event listener for a "reload" event that triggers the "loadData" method when fired.