zm_vr_house_back/src/view/layout/slide/index.vue

<template>
  <div class="slide">
    <el-menu :default-active="activeName" @select="selectHandle">
      <sub-menu :nav="nav" v-for="nav in navs" :key="nav.name" />
    </el-menu>
  </div>
</template>

<script>
import subMenu from './submenu'
import navs from '@/state/navs'
import { attach } from '@/constant/view'

export default {
  setup() {
    console.log(navs)
    return { navs }
  },
  computed: {
    activeName() {
      let routeName = this.$route.name
      return attach[routeName] ? attach[routeName] : routeName
    }
  },
  methods: {
    queryNav(navs, name) {
      for (let nav of navs) {
        if (nav.name === name) {
          return nav
        } else if (nav.children) {
          const qNav = this.queryNav(nav.children, name)
          if (qNav) return qNav
        }
      }
    },
    selectHandle(data) {
      const nav = this.queryNav(this.navs, data)
      const config = nav && nav.meta && nav.meta.default 
        ? nav.meta.default  : {}
        
      this.$router.push({name: data, ...config})
    }
  },
  components: {
    'sub-menu': subMenu
  }
}
</script>

<style lang="scss" scoped>
.slide {
  background-color: #0C0E2E;
  padding: 16px 0;
}
</style>