不知道说什么开头了，还是不说开头了。直接步入主题吧。

首先判断是否有tag，如果没有则默认隐藏

computed:{
  showTags(){
    return this.tagsList.length>0;
  }
}

我的思路是监听route的变化状态，由此来去重添加到标签里

//tags.vue
watch: {
      //监听路由
    $route(newValue, oldValue) {
      //当所有tags被删除，默认path为/，并清空tagsList
         if(newValue.fullpath == "/"){
             this.tagsList = [];
             return;
         }
      //切换路由时，默认选中tag
      this.tagsList.some(item => {
        if (item.path === newValue.fullPath) {
          this.tagName = item.path;
        }
      });
      this.setTags(newValue);
    },

添加到标签里首先得判断是否重复添加，所以得先判断一下是否当前跳转过去的路由是否在tagsList已存在

methods:{
  setTags(route){
    const isExit = this.tagsList.some(item => {
      return item.path  === route.fullPath;
    });
  }
}

如果跳转过去的路由在tagsList里面不存在的话即可添加

methods:{} 我就不写了

setTags(route){
  const isExit = this.tagsList.some(item => {
    return item.path === route.fullPath;
  });
  if(!isExit){
    this.tagsList.push({
      path: route.fullPath,
      meta: route.meta,
      name: route.name,
    });
  //获取路由路径，方便用户知道当前展示的是哪个界面
  this.tagName = route.fullPath;
  }
}

使用iview的tab组件绑定菜单

<template>
  <div v-if="showTags">
    <Tabs type="card" :value="tagName" @on-click="routerLink" @on-tab-remove="closeTags" closable>
      <TabPane
        v-for="item of tagsList"
        :key="item.name"
        :name="item.path"
        :label="item.name"
      ></TabPane>
    </Tabs>
  </div>
</template>

给tab绑定点击跳转事件

//页面跳转
routerLink(name){
  //name是获取到你当前点击的标签的name值
  //跳转页面
  this.$router.push({ path: name });
}

给tab绑定关闭界面
注意，关闭页面的时候得注意一下，如果是关闭当前选中的页面则要默认选中当前标签的最后一个标签
如果最后一个标签没有，则展示默认界面

//关闭页面
closeTags(name){
  let _this = this;
  _this.tagsList.forEach((item, index) => {
      //删除对应的tag
      if (item.path == name) {
        _this.tagsList.splice(index, 1);
      }
    });
    //关闭当前tag时 默认打开上一个tag
    if (_this.tagName === name) {
      if(_this.tagName.length>=1){
          _this.tagName = _this.tagsList[_this.tagsList.length - 1].path;
      }else{
          //如果List的长度小于1 则代表关闭的是最后一个，默认展示初始界面
          _this.tagName = "/"
      }
    }
}

最后附上完整代码和成品图

成品展示

  <style scoped>
</style>

<template>
  <div v-if="showTags">
    <Tabs type="card" :value="tagName" @on-click="routerLink" @on-tab-remove="closeTags" closable>
      <TabPane
        v-for="item of tagsList"
        :key="item.name"
        :name="item.path"
        :label="item.name"
      ></TabPane>
    </Tabs>
  </div>
</template>

<script scoped>
export default {
  data() {
    return {
      tagsList: [],
      tagName: ""
    };
  },
  components: {},
  watch: {
      //监听路由
    $route(newValue, oldValue) {
      //当所有tags被删除，默认path为/
      //   if(newValue.fullpath == "/"){
      //       this.tagsList = [];
      //       return;
      //   }
      //切换路由时，默认选中tag
      this.tagsList.some(item => {
        if (item.path === newValue.fullPath) {
          this.tagName = item.path;
        }
      });
      this.setTags(newValue);
    },
    //关闭tag时切换页面
    tagName(newValue, oldValue) {
      this.$router.push({ path: newValue });
    }
  },
  methods: {
    setTags(route) {
      //路由变换时 去重
      const isExit = this.tagsList.some(item => {
        return item.path === route.fullPath;
      });
      //当没有重复的时候则添加
      if (!isExit) {
        this.tagsList.push({
          path: route.fullPath,
          meta: route.meta,
          name: route.name
        });
        this.tagName = route.fullPath;
      }
    },
    //页面跳转
    routerLink(name) {
      this.$router.push({ path: name });
    },
    //关闭tags
    closeTags(name) {
      let _this = this;
      _this.tagsList.forEach((item, index) => {
          //删除对应的tag
        if (item.path == name) {
          _this.tagsList.splice(index, 1);
        }
      });
      //关闭当前tag时 默认打开上一个tag
      if (_this.tagName === name) {
        if(_this.tagName.length>=1){
            _this.tagName = _this.tagsList[_this.tagsList.length - 1].path;
        }else{
            //如果List的长度小于1 则代表关闭的是最后一个，默认展示初始界面
            _this.tagName = "/"
        }
      }
    }
  },
  computed: {
      //如果没有一个tag则隐藏tag
    showTags() {
      return this.tagsList.length > 0;
    }
  }
};
</script>