element-ui NavMenut组件 与 Tabs组件 联动

效果

效果图

所需工具

vuex - 注：如果对vuex不熟悉的同学参考文章

思路

• 封装NavMenut组件组件及Tabs组件
• 用 vuex 作为组件之间传值
• router-view 放入 Tabs组件内
• 使用 使用 Array.prototype.some()方法
  • 为了防止用户多次点击添加 做一个判断的值
  • 用 Array.prototype.some() 实现 Array.prototype.includes()

具体代码

具体思路和一些要点请看注释

aside.vue(侧边栏组件)

个人建议将 submenu 和 menu所需参数写成数据

tabs.vue

element 官方组件方法及方法没有注释

vuex（store.js）

重点来了！！！！

import Vue from 'vue';
import Vuex from 'vuex';
// 引入 router 在vuex内使用router跳转
import router from './router';

Vue.use(Vuex);
Vue.use(router);

export default new Vuex.Store({
  state: { // 定义tabs 所需参数
    tabsPage: [],
    TabsValue: ''
  },
  mutations: {
    editableTabs: (state, obj) => {
      // 浅拷贝 state.tabsPage
      let arr = Array.from(state.tabsPage);
      // 判断数组内是否为空
      if (arr.length !== 0) {
        // 使用 Array.some 去判断是否存在对象信息
        var even = function(obj) {
          return arr.some(item => {
            return item.name === obj.routeName;
          });
        };
        // even方法 如果对象存在返回true,不存在则返回flase
        // 加！触发 true 代码块  
        if (!even(obj)/* 如果不存在将对象push进数组内bing */) {
          // 将tabs所需参数push进arr数组
          arr.push({ title: obj.name, name: obj.routeName });
          // 赋值给tabsPage参数
          state.tabsPage = arr;
          // 赋值给TabsValue参数  
          state.TabsValue = obj.routeName;
          // 跳转 
          router.push({ name: obj.routeName });
        } else { // 如果存在 只做跳转选中
          // 赋值给TabsValue参数  
          state.TabsValue = obj.routeName;
          // 跳转 
          router.push({ name: obj.routeName });
        };
      } else {// 如果为0
        // 将tabs所需参数push进arr数组
        arr.push({
          title: obj.name, name: obj.routeName
        });
        // 赋值给tabsPage参数
        state.tabsPage = arr;
         // 赋值给TabsValue参数  
        state.TabsValue = obj.routeName;
         // 跳转 
        router.push({ name: obj.routeName });
      }
    }
  },
  actions: {
    // 注册方法
    editableTabs (context, obj) {
      context.commit('editableTabs', obj);
    }
  }
});

app.vue

后记

如果有其他方法实现，欢迎一起讨论。

最初开发想用Array.includes 去实现方法 但是对象数组无法去判断

只能用Array.some 去实现Array.includes