使用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

 views/Contact.vue

App.vue 

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 数组中移除对应的组件名称。

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