解决vue刷新页面后TagsView丢失问题

src/layout/components/TagsView/index.vue

<template>
  <div id="tags-view-container" class="tags-view-container container-style">
    <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
      <router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag) ? 'active' : ''"
        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item"
        :style="activeStyle(tag)" @click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''"
        @contextmenu.prevent.native="openMenu(tag, $event)">
        {{ $t(tag.meta.title) }}
        <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
      </router-link>
    </scroll-pane>
  </div>
</template>

<script>
export default {
  computed: {
    visitedViews() {
      return this.$store.state.tagsView.visitedViews
    },
  },
  mounted() {
    this.beforeUnload()
  },
  methods: {
    beforeUnload() {
      // 监听页面刷新
      window.addEventListener("beforeunload", () => {
        // visitedViews数据结构太复杂无法直接JSON.stringify处理，先转换需要的数据
        let tabViews = this.visitedViews.map(item => {
          return {
            fullPath: item.fullPath,
            hash: item.hash,
            meta: { ...item.meta },
            name: item.name,
            params: { ...item.params },
            path: item.path,
            query: { ...item.query },
            title: item.title,
          };
        });
        sessionStorage.setItem("tabViews", JSON.stringify(tabViews));
      });
      // 页面初始化加载判断缓存中是否有数据
      let oldViews = JSON.parse(sessionStorage.getItem("tabViews")) || [];
      if (oldViews.length > 0) {
        this.$store.state.tagsView.visitedViews = oldViews;
      }
    },
  }
}
</script>

登录时，清除tabViews的会话存储

src/views/login.vue

handleLogin() {
      this.$refs.loginForm.validate((valid) => {
          this.$store
            .dispatch("Login", this.loginForm)
            .then((res) => {
              if (res === "login") {
                //获取用户信息
                getInfo().then((res) => {
                  // 登录后清除会话存储
                  sessionStorage.removeItem("tabViews");
                  this.timer = setTimeout(() => {
                    this.$router.go(0)
                    this.$router
                      .push({ path: this.redirect || "/" })
                      .catch(() => {});
                  });
                });
                this.loading = false;
              }
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },