当前位置：首页 > article >正文

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

article 2025/3/28 12:54:43

以下是一个使用 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');

代码解释

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