删除指定页面key缓存

2023-10-15 11:03:35

在单页应用程序(SPA)中，keep-alive组件可缓存页面，以便在用户再次访问时快速加载。但是，有时您可能需要删除缓存中的特定页面，例如当页面数据发生变化时。本文将介绍如何结合vuex和vue-router来实现此目的。

代码实现

1. 关闭`tab`

// tabs.vue

<template>
  <div>
    <router-link v-for="tab in tabs" :key="tab.name" :to="tab.path">
      {{ tab.name }}
    </router-link>
    <router-view />
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState('tabs', ['tabs']),
  },
  methods: {
    ...mapActions('tabs', ['closeTab']),
  },
}
</script>

2. 监听路由变化

// store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    tabs: [
      { name: 'Home', path: '/' },
      { name: 'About', path: '/about' },
    ],
  },
  mutations: {
    closeTab(state, tab) {
      state.tabs = state.tabs.filter(t => t.name !== tab.name)
    },
  },
  actions: {
    closeTab({ commit }, tab) {
      commit('closeTab', tab)
    },
  },
})

export default store

3. 删除缓存

// router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue'),
    },
    {
      path: '/about',
      name: 'About',
      component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
    },
  ],
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.keepAlive)) {
    store.dispatch('closeTab', from)
  }
  next()
})

export default router