首先先用el-tag搭好架子

<template>
  <div class="tags">
    <!-- tags标签页 -->
    <el-tag
      :key="tag.name"
      v-for="(tag,index) in tags"
      :closable="tag.name !== 'home'"
      :disable-transitions="false"
      @close="handleClose(tag, index)"
      @click="changeMenu(tag)"
      :effect="$route.name === tag.name ? 'dark' : 'plain'"
    >{{ tag.title }}</el-tag>
  </div>
</template>

tags的获取主要是通过vuex进行维护

let tags: ComputedRef<any> = computed(() => {
  return store.state.tagView.tags
})

在关闭tag的关闭方法就是判断关闭的页面是否为当前浏览的页面如果不是就直接commit到store去进行删除，如果是当前浏览的页面就跳转页面到附近tag的页面，并且commit到store删除tag

function handleClose(tag: IMenu, index: any) {
  let length = tags.value.length
  if (tag.name !== route.name) {
    store.commit("CLOSE_TAG", tag)
    return
  }
  store.commit("CLOSE_TAG", tag)
  if (index + 1 === length) {
    router.push({ name: tags.value[index - 1].name })
  } else {
    router.push({ name: tags.value[index].name })
  }
}

然后点击tag的方法就是单纯的跳转路由

这边我对tags的数据同步存到了localstorage当中，并且想要实现刷新页面tags不会丢失，但是关闭浏览器tags会丢失的效果

 state:{
        tags:getTags()
   
 },

这个getTags就是从localStorage读取tags的方法，代码如下 通过json的stringfy和parse来达到localstorage存储数组的方法

const tags=[ 
    {
        "name":"home",
        "path": "/home",
        "route": "1",
        "id": '0',
        "title":"首页"
    }
]
export function getTags(){
   return localStorage.getItem('tags')===null? tags:JSON.parse(localStorage.getItem('tags')+'')
}

目前添加tags的情况只有一种，就是侧边栏的点击事件，通过代理给store去进行tags数组的操作

function clickMenu(item: IMenu) {
  store.dispatch("addTag", item)
}

store的添加tag的方法如下

  addTag(context:any,tag:IMenu){
          let result=context.state.tags.findIndex((item:IMenu)=>item.name===tag.name);
          result===-1? context.commit("ADD_TAG",tag):''
  },

解释一下代码，就是通过数组的findIndex方法查找tags里有没有和当前想添加tag同名的也就是一样的tag，如果有的话findIndex就会返回相应下标，如果没有就会返回-1，当接收到-1的时候也就代表着tags里没有同名tag那么就直接commit添加数组就行了

现在实现了localstorage读取tags，和侧边栏添加tags，tags的删除，以及tags的点击切换。

下面就是将tags保存在localstorage中，这边我用了watch方法，监测store的tags有无变化，有的话就加入到localstorage当中，这边tags.value是因为tags是由computed代理的，类型为 ComputedRef<any>，在vue3中类似的代理想取得值都得加.value

watch(tags.value,()=>{
  localStorage.setItem('tags',JSON.stringify(tags.value))
})

      现在的tags基本就实现了，但是刷新浏览器不会丢失tags数组，关闭浏览器也不会丢失tags数组，而我们要的效果是关闭浏览器会丢失tags数组，即关了重开tag就全没了，这里我之前踩了个小坑记录一下，windows是可以使用window.addEventListener监听事件并调用回调函数的，我当是就想在浏览器关闭事件的回调函数上直接清空localstorage，但是很显然失败了，因为我监听的是onunload事件，在关闭浏览器时会调用没想到在刷新页面时也会调用，目前没找到只有浏览器关闭时调用的方法，所以我用了另外的方法。

    sessionstorage和localstorage的区别就是sessionstorage在关闭浏览器时会被清空，而localstorage在浏览器关闭时不会清空，那么我就在登录的时候在sessionstorage中添加了一个‘isLogin’来判断是否登录了如果我关闭了浏览器isLogin就会是null，这样就能判断浏览器是否被关闭过。

在登录成功时调用

 sessionStorage.setItem('isLogin','true')

接下来在全局app上实现检测方法

import { useStore } from 'vuex';
const store=useStore();
if (sessionStorage.getItem('isLogin') === null) {
    localStorage.removeItem('tags')
    store.commit('RESET_TAG')
}

这边因为我用的是<script setup>组件，是没有created和setup方法的，所以直接就写了，当isLogin空的时候就把localStorage的tags移除。下面我又调用了store.commit方法是为了防止vuex中的state还保留着之前的tags数组。现在刷新不丢失tag，关闭浏览器会丢失tag的功能就完成了，

最终效果如下