使用vue3和vue-router实现动态添加和删除cachedViews数组

以下是一个使用 Vue 3 和 Vue Router 实现动态添加和删除 cachedViews 数组的代码示例，该示例结合 keep-alive 组件来动态控制路由组件的缓存。

src/
├── App.vue
├── router/
│   └── index.js
├── views/
│   ├── Home.vue
│   ├── About.vue
│   └── Contact.vue
└── main.js

代码实现

router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
import Contact from '../views/Contact.vue';const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About},{path: '/contact',name: 'Contact',component: Contact}
];const router = createRouter({history: createWebHistory(),routes
});export default router;

views/Home.vue

<template><div><h1>Home Page</h1></div>
</template><script setup>
import { defineComponent } from 'vue';export default defineComponent({name: 'Home'
});
</script>

 views/Contact.vue

<template><div><h1>Contact Page</h1></div>
</template><script setup>
import { defineComponent } from 'vue';export default defineComponent({name: 'Contact'
});
</script>

App.vue 

<template><div id="app"><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link> |<router-link to="/contact">Contact</router-link><keep-alive :include="cachedViews"><router-view></router-view></keep-alive><div><h2>Cached Views</h2><ul><li v-for="view in cachedViews" :key="view">{{ view }}<button @click="removeCachedView(view)">Remove</button></li></ul></div></div>
</template><script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';const route = useRoute();
const cachedViews = ref([]);// 监听路由变化，动态添加缓存视图
watch(() => route.name,(newName) => {if (newName && !cachedViews.value.includes(newName)) {cachedViews.value.push(newName);}},{ immediate: true }
);// 删除缓存视图
const removeCachedView = (view) => {const index = cachedViews.value.indexOf(view);if (index !== -1) {cachedViews.value.splice(index, 1);}
};
</script>

main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';const app = createApp(App);
app.use(router);
app.mount('#app');

代码解释

1. 路由配置：在 router/index.js 中定义了三个路由：Home、About 和 Contact。
2. 组件定义：在 views 目录下创建了对应的组件，并为每个组件设置了 name 属性。
3. App.vue 组件：
   • 使用 keep-alive 组件并通过 :include 绑定 cachedViews 数组，来控制哪些组件需要被缓存。
   • 使用 watch 监听路由变化，当路由切换时，如果新路由对应的组件名称不在 cachedViews 数组中，则将其添加进去。
   • 提供了一个列表展示当前缓存的组件名称，并为每个名称添加了一个删除按钮，点击按钮调用 removeCachedView 方法从 cachedViews 数组中移除对应的组件名称。

通过以上代码，你可以实现动态添加和删除需要缓存的路由组件。