这种tagsview点每一个关闭相应页面如何写，复杂吗

Question

点击相应的tag要关闭相应的页面，这个该如何写能，麻烦吗

<template>
<!-- 快速导航tab -->
<div class='tabs-view-container'>

<router-link class="tabs-view" v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path">
  <el-tag :closable="true" @close='closeViewTabs(tag,$event)'>
    {{tag.name}}
  </el-tag>
</router-link>
</div>

</template>

<script>

export default {
  computed: {
    visitedViews() {
      return this.$store.state.app.visitedViews.slice(-6)
    }
  },
  methods: {
    closeViewTabs(view, $event) {
      this.$store.dispatch('delVisitedViews', view)
      $event.preventDefault()
    },
    addViewTabs() {
      this.$store.dispatch('addVisitedViews', this.$route.matched[this.$route.matched.length - 1])
    }
  },
  watch: {
    $route() {
      this.addViewTabs()
    }
  }
}

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.tabs-view-container{

display: inline-block;
vertical-align: top;
margin-left: 10px;
.tabs-view{
  margin-left: 10px;
}

}

</style>

Answer 1

你好，请问你这个效果做出来了吗

Answer 2

本质就是 路由跳转
做一个tagsview组件
点击菜单的时候 添加一个 重复不添加 并跳转页面
关闭的时候 删除 判断是否为当前页面 不是就直接删除 是 就返回上一次并关闭
使用store和路由守卫做