vue 数组去重

Question

想实现的效果是点击左边导航，打开右边标签页，我在这里维护了一个数据，如果重复点击就把重复的去掉，求解。
就是怎么去重，把重复点击的不要显示

export default {
  name: "index",
  data:function(){ 
    return {
            msg:"hi，欢迎光临，后台管理系统",
            mainNav:[],
            navArr:[]
    }
    },
    mounted:function(){
        if(this.mainNav == ''){
            this.$router.push('/mean/home');
        }
        // console.log(this.navArr);
    },
    methods:{
        showNav:function(name){
            this.navArr.push(name);
            this.mainNav = this.navArr;
        }
    },
  components:{
    leftBar,
    top,
    meanBody
  }
};

Answer 1

showNav(name){
    let mu = this.navArr.find((n) => n.name == name.name);
    if(mu){
        console.log('标签已选择..')
        return;
    }else{
        this.navArr.push(name);
    }
}

Answer 2

1.左边导航栏navArr数组里的每条数据加个showFlag属性
2.右侧标签栏根据showFlag状态来判断是否显示
3.左边标签栏通过点击事件来切换showFlag的状态

Answer 3

this.navArr[j].indexOf(name) > -1

Answer 4

监听路由

$route(newValue, oldValue){
    this.setTags(newValue);
}

设置标签

setTags(route){
    const isExist = this.tagsList.some(item => {
        return item.path === route.path;
    })
    !isExist && this.tagsList.push({
        title: route.meta.title,
        path: route.path
    })
},