vue实现路由多标签显示

思路
1.在路由router.beforeEach添加展示的标签数据，如果有当前页面的标签数据的话如果再跳转当前路由就更新一下query的值
2.点击标签关闭按钮的时候，如果不是第一个就跳转到前一个路由标签，如果是第一个则跳转到下一个路由标签
3.点击标签的时候改变其他标签的选中状态，并跳转路由
4.关闭其他路由标签的按钮
5.超过一定标签数量显示左右移动的按钮
组件代码：

 <template>
  <div class="nav-click">
    <div class='nav-wrap'>
        <i  v-if='titles.length>8' @click='navleft' class="el-icon-arrow-left"></i>
        <div class='nav-click-div'>
           <div ref='navclickwrap' class='nav-click-wrap'>
          <ul>
                <li class="nav-click-body" :class="item.showClick?'nav-click-body-active':''" v-for="(item,index) in titles" :key="index" :title="item.title"
                 @click="changeTag(index)">
                    <div class="nav-click-body-title" >{{item.title}} {{item.flag}}</div>
                    <div v-if="item.showClick" class="nav-click-body-close" @click.stop="removeTag(index)">×</div>
                </li>
            </ul>  
        </div> 
        </div>
        
        <i v-if='titles.length>8' @click='navright' class="el-icon-arrow-right"></i>
    </div>
    <el-button v-if='titles.length>1' class='close-button' @click='removeElseTag' type="primary">关闭其他</el-button>
  </div>
</template>
<script>
export default {
    name:'syClick',
    props:{
        // 路由组件页标签列表
        titles:{
            type: Array,
            default: ()=>{
                return []
            }
        }
    },
    data() {
        return {
            left:0,
        }
    },

    methods: {
        navleft(){
            this.left+=100
            if(this.left<this.$refs.navclickwrap.offsetWidth){
               this.$refs.navclickwrap.style.left = -this.left+'px' 
            }else{
                this.left=this.$refs.navclickwrap.offsetWidth
                this.$refs.navclickwrap.style.left = -this.$refs.navclickwrap.offsetWidth+'px' 
            }
        },
        navright(){
             this.left-=100
            console.log(this.left)
            if(-this.left<0){
               this.$refs.navclickwrap.style.left = -this.left+'px' 
            }else{
                this.left=0
                this.$refs.navclickwrap.style.left = '0px' 
            }
        },
        // 删除标签页
        removeTag(index) {
            if(this.titles.length>1){
                this.titles.splice(index,1)
                if(index>0){
                   this.titles[index-1].showClick=true
                   this.$router.push({
                        path: this.titles[index-1].path,
                        query: this.titles[index-1].query,
                    })
                }else{
                     this.titles[index].showClick=true
                     this.$router.push({
                        path: this.titles[index].path,
                        query: this.titles[index].query,
                    })
                }
            }
        },
        removeElseTag(){
            this.$emit('removeElseTag')
        },
        // 切换标签页
        changeTag(index) {
            console.log(this.titles[index])
            for (let i = 0; i < this.titles.length; i++) {
                this.titles[i].showClick=false;
            }
            this.titles[index].showClick=true
            this.$router.push({
                path: this.titles[index].path,
                query: this.titles[index].query,
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.nav-click{
position:relative;
padding:10px 0;
.nav-wrap{
    position:relative;
    width:94%;
}
.el-icon-arrow-left,.el-icon-arrow-right{
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    cursor:pointer;
    z-index:10;
}
.nav-click-div{
    overflow:hidden;
    margin:0 40px;
}
.nav-click-wrap{
    position:relative;
}
.el-icon-arrow-left{
    left:15px;
}
.el-icon-arrow-right{
    right:15px;
}
ul{
    display:flex;
    margin:0;
    padding:0;
}
ul>li{
    list-style:none;display:flex;
    cursor:pointer;
    padding:10px;
    margin:0 5px;
    color:#4E5969;
      
    // display:inline-block;
}
ul>li:hover{
    background:#F2F3F5;
}
li.nav-click-body-active{
    background:#F6F7F9;
}
.nav-click-body-title{
    margin-right:5px;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.close-button{
    position:absolute;
    right:10px;
    top:50%;
    transform: translateY(-50%);
}
}
</style>

路由的钩子函数代码：

router.beforeEach(async (to, from, next) => {
var arr=store.getters.openRoute
if(to.meta._title){
  var arr1=arr.find(function(item1,index,arr){
    return item1.title==to.meta._title
  });
  if(!arr1){
  arr.push({title:to.meta._title,showClick:false,path:to.path,query: to.query})
  }
  for (let i = 0; i < arr.length; i++) {
  arr[i].showClick=false
  if(arr[i].title==to.meta._title){
    arr[i].showClick=true
    arr[i].query=to.query
   }
  }
}
})