sky-web/src/components/heads/menus.vue

<template>
<div>
  <div class="menubox">
    <div class="menu">
      <span class="menu-item" :class="itemId == '0' ? 'item' : ''" @click="btn({ code: '0' })">首页</span>
      <span class="menu-item" :class="item.code == itemId ? 'item' : ''" v-for="(item, index) in items" :key="index" @click="btn(item)" v-show="item.state == '0'">{{item.name}}</span>
    </div>
  </div>
  <div class="xian"></div>
</div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('menu')
export default {
  components: {},
  data () {
    return {
      itemId: localStorage.getItem('itemId') || '0'
    }
  },
  methods: {
    ...mapActions(['getmenu']),
    btn (e) {
      this.itemId = e.code
      // eslint-disable-next-line eqeqeq
      if (e.code == '0') {
        this.$router.push('/www/')
        localStorage.setItem('itemId', e.code)
        return
      }
      // eslint-disable-next-line eqeqeq
      if (e.type == '1') {
        window.open(e.uri)
        return
      }
      // localStorage.setItem('itemId', e.code)
      // eslint-disable-next-line eqeqeq
      if (e.type == '0') {
        this.$router.push(
          { path: `/www/list/${e.code}` },
          onComplete => {},
          onAbort => {}
        )
      }
      // eslint-disable-next-line eqeqeq
      if (e.type == '2') {
        const routeData = this.$router.resolve({
          path: `/www/page/${e.pages}`,
          query: { code: e.code }
        })
        window.open(routeData.href)
      }
    }
  },
  mounted () {
    this.getmenu()
  },
  computed: {
    ...mapState(['items'])
  },
  watch: {
    itemId (val) {
      localStorage.setItem('itemId', val)
    },
    $route (to, from) {
      const code = to.query.code
      const id = to.params.id
      if (code) {
        localStorage.setItem('itemId', code)
      } else if (id) {
        localStorage.setItem('itemId', id)
      } else {
        localStorage.setItem('itemId', '0')
      }
      this.itemId = localStorage.getItem('itemId') || '0'
    }
  }
}
</script>

<style lang="less" scoped>
.menubox {
  width: 100%;
  background: #c9161d;
  .menu {
    width: 70%;
    margin: 2px auto;
    display: flex;
    .menu-item {
      display: block;
      width: 10%;
      line-height: 3em;
      color: #fff;
      cursor: pointer;
      text-align: center;
    }
    .item {
      background: #fff;
      color: #c9161d;
    }
  }
}
.xian {
  width: 100%;
  height: 2px;
  background: #8b0005;
  margin-top: 3px;
}
</style>