如何在Vue项目中使用路由实现标签页缓存和管理？

// main.jsimport Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [  // 路由配置]const router = new VueRouter({  routes})new Vue({  router,  render: h => h(App)}).$mount('#app')

// 路由配置示例import HomePage from '@/components/HomePage.vue'import AboutPage from '@/components/AboutPage.vue'import DetailPage from '@/components/DetailPage.vue'const routes = [  { path: '/', component: HomePage },  { path: '/about', component: AboutPage },  { path: '/detail/:id', component: DetailPage }]

// 路由配置示例const routes = [  { path: '/', component: HomePage, meta: { keepAlive: true } },  { path: '/about', component: AboutPage },  { path: '/detail/:id', component: DetailPage }]

// DetailPage.vueexport default {  data() {    return {      cachePage: false    }  },  beforeRouteLeave(to, from, next) {    if (!this.cachePage) {      next()    } else {      this.$nextTick(() => {        // 缓存当前页面        this.$store.commit('addCachedPage', { path: from.path, name: from.name })        next(false)      })    }  }}

// store/index.jsexport default new Vuex.Store({  state: {    cachedPages: []  },  mutations: {    addCachedPage(state, page) {      state.cachedPages.push(page)    },    removeCachedPage(state, path) {      const index = state.cachedPages.findIndex(item => item.path === path)      if (index !== -1) {        state.cachedPages.splice(index, 1)      }    }  },  actions: {},  modules: {}})

// TabMenu.vueexport default {  computed: {    cachedPages() {      return this.$store.state.cachedPages || []    }  }}

<!-- TabMenu.vue --><template>  <div>    <router-link v-for="page in cachedPages" :key="page.path" :to="page.path" exact>{{ page.name }}</router-link>  </div></template>