在 vue 中,默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时，会创建一个只带有初始状态的新实例。但是 vue 提供了 keep-alive 组件,它可以将一个动态组件包装起来从而实现组件切换时候保留其状态。本篇文章要介绍的并不是它的基本使用方法(这些官网文档已经写的很清楚了),而是它如何结合 VueRouter 来更自由的控制页面状态的缓存 。

全部缓存

我们先搭建一个 Vue 项目,里面有三个页面 a , b , c ,并给它们一些相互跳转的逻辑和状态 。

• a 页面

                        
                          <template>
  <div>
    <div>A页面</div>
    <input type="text" v-model="dataA" /><br />
    <div @click="toB">跳转B</div>
    <div @click="toC">跳转C</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const dataA = ref("");
const toB = () => {
  router.push("/bb");
};
const toC = () => {
  router.push("/cc");
};
</script>

                        
                      

• b 页面

                        
                          <template>
  <div>
    <div>B页面</div>
    <input type="text" v-model="dataB" /><br />
    <div @click="toA">跳转A</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const dataB = ref("");
const toA = () => {
  router.push("/aa");
};
</script>

                        
                      

• c 页面

                        
                          <template>
  <div>
    <div>C页面</div>
    <input type="text" v-model="dataC" />
    <div @click="toA">跳转A</div>
  </div>
</template>

<script lang="ts" setup name="C">
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const dataC = ref("");
const toA = () => {
  router.push("/aa");
};
</script>

                        
                      

然后在 route/index.ts 写下它们对应的路由配置 。

                        
                          import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

const routes: RouteRecordRaw[] = [
  {
    path: "/aa",
    name: "a",
    component: () => import(/* webpackChunkName: "A" */ "../views/a.vue"),
  },
  {
    path: "/bb",
    name: "b",
    component: () => import(/* webpackChunkName: "B" */ "../views/b.vue"),
  },
  {
    path: "/cc",
    name: "c",
    component: () => import(/* webpackChunkName: "C" */ "../views/c.vue"),
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

                        
                      

在 App.vue 中我们用 keep-alive 将 router-view 进行包裹 。

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

                        
                      

启动项目,测试一下页面状态有没有被缓存 。

此时我们发现状态并没有缓存,并且控制台还给了个警告 。

上面的写法在 vue2 中是可以的,但是在 vue3 中需要将 keep-alive 写在 router-view 中才行,我们修改一下写法 。

                        
                          <template>
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>

                        
                      

这种写法其实就是 router-view 组件的插槽传递了一个带有当前组件的组件名 Component 的对象,然后用 keep-alive 包裹一个动态组件(回归原始写法).

我们再试一下页面的缓存效果,这时候发现页面的状态被缓存了 。

缓存指定页面

通常情况下我们并不想将所有页面状态都缓存,而只想缓存部分页面,这样的话该怎么做呢？

其实我们可以在 template 中通过$route 获取路由的信息,所以我们可以在需要缓存的页面配置一下 meta 对象,比如 a 页面我们想缓存其状态,可以将 keepAlive 设置位 true 。

                        
                          //route/index.ts

const routes: RouteRecordRaw[] = [
  {
    path: "/aa",
    name: "a",
    meta: {
      keepAlive: true,
    },
    component: () => import(/* webpackChunkName: "A" */ "../views/a.vue"),
  },
  ...
];

                        
                      

然后回到 App.vue 中判断 keepAlive 来决定是否缓存 。

                        
                          <template>
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component v-if="$route.meta.keepAlive" :is="Component" />
    </keep-alive>
    <component v-if="!$route.meta.keepAlive" :is="Component" />
  </router-view>
</template>

                        
                      

再看下效果 。

此时我们发现 a 页面状态被缓存,b 页面的状态没有缓存 。

但是有时候我们想要这样一个效果 。

a 跳转 b 的时候我们需要缓存 a 页面状态,但是当 a 跳转 c 的时候我们不需要缓存 a 页面,此时我们该如何做呢？

或许有的同学想到了这样一个方法,当 a 跳转 c 的时候将 a 页面的缓存删除,这样就实现了上面的效果。可惜我找了半天也没找到 vue3 中删除指定页面缓存的方法 。

我也尝试过跳转 c 页面的时候将 a 的 keepAlive 设置为 false,但是再次回到 a 页面的时候 keepAlive 会重置,a 页面状态依然会被缓存.

既然如此为了做到更精细的缓存控制只有使用 keep-alive 中的 inclue 属性了 。

使用 inclue 控制页面缓存

keep-alive 默认会缓存内部的所有组件实例，但我们可以通过 include 来定制该行为。它的值都可以是一个以英文逗号分隔的字符串、一个正则表达式，或是一个数组。这里我们使用一个数组来维护需要缓存的组件页面,注意这个数组中是组件的名字而不是路由的 name 。

在 vue3 中给组件命名可以这样写 。

                        
                          <script lang='ts'>
export default {
    name: 'MyComponent',
}
</script>

                        
                      

但是我们通常会使用 setup 语法,这样的话我们得写两个 script 标签,太麻烦。我们可以使用插件 vite-plugin-vue-setup-extend 处理 。

                        
                          npm i vite-plugin-vue-setup-extend -D

                        
                      

然后在 vite.config.ts 中引入这个插件就可以使用了 。

                        
                          import { defineConfig, Plugin } from "vite";
import vue from "@vitejs/plugin-vue";
import vueSetupExtend from "vite-plugin-vue-setup-extend";

export default defineConfig({
  plugins: [vue(), vueSetupExtend()],
});

                        
                      

然后就可以这样命名了 。

                        
                          <script lang="ts" setup name="A"></script>

                        
                      

下面我们修改一下 App.vue 。

                        
                          <template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="['A']">
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>

                        
                      

这其实就代表组件名为 A 的 页面才会被缓存,接下来我们要做的就是控制这个数组来决定页面的缓存,但是这个数组要放在哪里维护呢? 答案肯定是放到全局状态管理器中拉。所以我们引入 Pinia 作为全局状态管理器 。

                        
                          npm i pinia

                        
                      

在 main.ts 中注册 。

                        
                          import { createPinia } from "pinia";
const Pinia = createPinia();
createApp(App).use(route).use(Pinia).use(RouterViewKeepAlive).mount("#app");

                        
                      

新建 store/index.ts 。

                        
                          import { defineStore } from "pinia";

export default defineStore("index", {
  state: (): { cacheRouteList: string[] } => {
    return {
      cacheRouteList: [],
    };
  },
  actions: {
    //添加缓存组件
    addCacheRoute(name: string) {
      this.cacheRouteList.push(name);
    },
    //删除缓存组件
    removeCacheRoute(name: string) {
      for (let i = this.cacheRouteList.length - 1; i >= 0; i--) {
        if (this.cacheRouteList[i] === name) {
          this.cacheRouteList.splice(i, 1);
        }
      }
    },
  },
});

                        
                      

在 App.vue 中使用 cacheRouteList 。

                        
                          <template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="catchStore.cacheRouteList">
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>
<script lang="ts" setup>
import cache from "./store";
const catchStore = cache();
</script>

                        
                      

此时就可以根据 cacheRouteList 控制缓存页面了.

此时我们再来实现前面提到的问题 a 跳转 b 的时候我们需要缓存 a 页面状态,但是当 a 跳转 c 的时候我们不需要缓存 a 页面 就很简单了 。

                        
                          import cache from "../store";
const catchStore = cache();
const router = useRouter();

const toB = () => {
  catchStore.addCacheRoute("A");
  router.push("/bb");
};
const toC = () => {
  catchStore.removeCacheRoute("A");
  router.push("/cc");
};

                        
                      

此时再看下页面的效果 。

可以发现 a 到 c 后再回来状态就重置了,这样不仅做到了上述效果,还可以让你随时随地的去删除指定组件的缓存.

到这里我们便完成了使用 inclue 对页面状态缓存进行更精细化的控制。当然,如果你有更好的方案欢迎在评论区指出,一起讨论探索 。

最后此篇关于Vue3中keepAlive如何搭配VueRouter来更自由的控制页面的状态缓存?的文章就讲到这里了,如果你想了解更多关于Vue3中keepAlive如何搭配VueRouter来更自由的控制页面的状态缓存?的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。