vue3动态判断keep-alive，并且有路由切换动画

中VUE3版本中，用v-if判断路由里是否有keep-alive===true，来判断是否做路由缓存，再加上要有路由切换动画，是行不通的。
会有各种报错，要么就是缓存不上。

所以，这里 要应用keep-alive标签的：include来判断是否执行keepalive操作。

大体思路如下：

1.配置需要做缓存的页面，存起来。
2.判断当前页面的name是否在上面的配置里。
3.这样就能实现了。

下面上解释，上代码。

步骤一

首先，我们要明白一个概念：keepalive标签的include，值是这样的：[‘name1’,‘name’2’,‘name3’]。里面的每个值，是每个组件的name,不是路由中的name。（看注释）

export default {
  name: '',// 是这个name
  data() {
	return {};
  }
 };

vue3我们大多用的都是setup语法，name写在哪里呢？

方法一：

在 3.2.34 或以上的版本中，使用 【setup】 的单文件组件会自动根据文件名生成对应的 name 选项，无需再手动声明。 文件名即name，但是不太适用。如果列表页都叫index，那么就乱套了。

方法二（推荐）：

用插件。本人用的是vite,安装了这个插件：vite-plugin-vue-setup-extend。
然后在vite.config.js中配置一下就行了。（看着注释）

import VueSetupExtend from 'vite-plugin-vue-setup-extend' // 引入
export default defineConfig(({ command, mode }) => {
  return {
    base:  '/',
    plugins: [
      vue(),
      VueSetupExtend(),// 在这个位置加上这个配置
   

大功告成。webpack的小伙伴自己查一下安装、引入就行啦。

搞定之后，就可以直接在setup标签上写name了。

如：

<script setup name="/home/index">

这里，推荐把name的值写成路由的path，方便后面使用。

步骤二

所以，下面的思路就是，把路由里面keepalive为true的path拿出来，存上，放到的include里面就行了。
这样，include就会根据当前页面的name判断是否缓存某个页面了。

例：我是在遍历路由的时候，把值存入了全局变量中。

//pinia
const keepAliveArr= useKeepAliveArrStore();// keepAliveArr里面有个state叫arrs
// 关键步骤
const routes = [];//routes数组对象
 routes.forEach(item => {
    if(item.meta.keepAlive===true) keepAliveArr.arrs.push(item.path);
 })
 

之后给keep-alive的include就可以了。

 <router-view v-slot="{ Component }">
	<transition name="move" mode="out-in">
	    <keep-alive :include="keepAliveArr.arrs">
	      <component :is="Component" />
	    </keep-alive>
  </transition>
</router-view>

暂时就想到这个办法，有更好的方式希望交流下。