一劳永逸解决 Vue-Element-Admin Tags-View 标签刷新消失问题

2024-01-04 16:54:35

问题

在使用 Vue-Element-Admin 时，遇到了一个棘手的问题：在刷新页面后，标签页（Tags-View）会消失。这给用户带来了极大的困扰，因为他们需要重新打开所有标签页，影响了工作效率。

解决方案

经过一番探索，我找到了一种一劳永逸解决此问题的方案：使用 SessionStorage 或 LocalStorage 来持久化标签页的状态。具体步骤如下：

修改 /src/store/index.js

在 /src/store/index.js 中，找到 createStore 函数，并添加以下代码：

import { sessionStorage, localstorage } from '@/utils/storage'
...
const store = createStore({
  ...
  plugins: [
    createPersistedState({
      storage: {
        getItem: key => sessionStorage.getItem(key),
        setItem: (key, value) => sessionStorage.setItem(key, value),
        removeItem: key => sessionStorage.removeItem(key)
      }
    })
  ]
  ...
})

这将使用 SessionStorage 持久化 Vuex 状态。

修改 /src/layout/components/TagsView/index.vue

在 /src/layout/components/TagsView/index.vue 中，找到 <template> 区域，并添加以下代码：
```
<template>
  <keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
  </keep-alive>
</template>
```
这将使用 <keep-alive> 组件缓存标签页组件。
刷新页面

完成上述修改后，刷新页面。你会发现，标签页现在已经持久化，即使刷新后也不会消失。