Element 点击导航栏默认选中第一个路由

561 阅读1分钟
<el-menu
    ref="menu"
    :show-timeout="200"
    :collapse="isCollapse"
    :unique-opened="$store.state.settings.uniqueOpened"
    active-text-color="#4979FF"
    :default-active="onRoutes"
    @close="closeMenu"
    @open="chooseMenu"
    >
 </el-menu>
    
    
export default {
  components: { Logo, SidebarItem },
  data() {
    this.selectedKeysMap = {}
    this.openKeysMap = {}
    return {
      hide: true,
      selectedKeys: this.selectedKeysMap[this.$route.path],
      openKeys: this.openKeysMap[this.$route.path],
      menuData:null,
    }
  },
  watch:{
  },
  created(){
     this.getMenuData();
  },
  mounted(){
  },
  computed: {
    ...mapState({
      hideSidebar: state => state.app.sidebar.opened,
      openMenu: state => state.menu.openMenu,
			
    }),
    ...mapGetters(["permission_routes", "sidebar", "hideChildMenu"]),
    isCollapse() {
      return false
    },
    fmt_permission_routes() {
      return this.permission_routes.filter(item => !item.hidden);
    },
     onRoutes() {
      let path = this.$route.path;
      this.selectedKeys = this.selectedKeysMap[path];
      this.openKeys = this.openKeysMap[path];
      for (let i = 0; i < this.menuData.length; i++) {
        if(this.menuData[i].children) {
          for (let j = 0; j < this.menuData[i].children.length; j++) {
            if (
              this.menuData[i] &&
              this.menuData[i].children[j] &&
              path ==  this.menuData[i].path+'/'+this.menuData[i].children[j].path
            ) {
              return i +'-'+ j + '';
            }
          }
        }

      }
    },
  },
  methods: {
    closeMenu(index, indexPath) {
      this.$store.dispatch('hideChildrenMenu', true)
      this.$refs.menu.open(indexPath);
      // this.$store.dispatch('deleteOpenMenu', index)
    },
    chooseMenu(index, indexPath) {
      this.$store.dispatch('hideChildrenMenu', false)
      //默认选中第一个,根据情况更改代码
      this.$router.push( this.menuData[index].path+'/'+this.menuData[index].children[0].path)
    },
     getMenuData(){
      this.menuData=this.removeRouteHide(this.fmt_permission_routes);
    },
    removeRouteHide(list){
      let menuData=this.fmt_permission_routes.filter(item => {
        let child;

        if(item.children && item.children.length){
          child = item.children.filter(itemchild => !itemchild || itemchild && itemchild.meta && !itemchild.meta.hidden)
        }
        item.children = child
        return !item || item && item.meta && !item.meta.hidden
      });
      return menuData
    },
	
  }
};