vue实现路由多标签显示

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

路由的钩子函数代码：

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
   }
  }
}
})