mall-web-ssr/components/main/Nav.vue

<template>
  <nav class="nav-list">
    <div class="container">
      <nuxt-link to="/product/kind/home" class="item item-first" tag="div">
        <div>器件选型
          <kind-category v-if="$route.path != '/'" :class="{'change': isChange}" @loadchild="loadProductKinds" id="kindCategory"></kind-category>
        </div>
      </nuxt-link>
      <nuxt-link :to="'/'" class="item" exact>
        <span>首&nbsp;&nbsp;页</span>
      </nuxt-link>
      <nuxt-link to="/applyPurchase" class="item">
        <span>询价求购</span>
        <!--<img class="new-animate" src="/images/all/bussiness.png" alt="">-->
      </nuxt-link>
      <!--<nuxt-link to="/supplier" class="item" v-if="!isInFrame">-->
        <!--<span>供应商</span>-->
      <!--</nuxt-link>-->
      <a class="item" @click="goB2B">
        <span>B2B商务</span>
        <!--<img class="new-animate" src="/images/all/hot.png" alt="">-->
      </a>
      <nuxt-link to="/eCommerce/home/factory" :class="{active: baseUtils.startWith($route.path, '/eCommerce/home')}" class="item">
        <span>电商
          <!--<i class="iconfont icon-arrow-down"></i>-->
          <!--<i class="iconfont icon-arrow-up"></i>-->
        </span>
        <!--<ul class="expand-list" v-if="isMounted">-->
          <!--<nuxt-link to="/provider/factories" tag="li" v-show="name !== '原厂专区'">-->
            <!--&lt;!&ndash;<nuxt-link to="/provider/factories">原厂专区</nuxt-link>&ndash;&gt;-->
            <!--<span>原厂专区</span>-->
          <!--</nuxt-link>-->
          <!--<nuxt-link to="/provider/home" tag="li" v-show="name !== '代理经销'">-->
            <!--<span>代理经销</span>-->
          <!--</nuxt-link>-->
          <!--<li @click="open('/store/33069557578d44e69bd91ad12d28a8d4')">-->
            <!--<span>优软寄售</span>-->
          <!--</li>-->
        <!--</ul>-->
      </nuxt-link>
      <!--<nuxt-link to="/product/brand/brandList/A" class="item">-->
        <!--<span>品牌墙</span>-->
      <!--</nuxt-link>-->
      <nuxt-link to="/pcb" class="item">
        <span>PCB专区</span>
      </nuxt-link>
      <a class="item" href="https://zb.usoftchina.com/" target="_blank">
        <span>闯客网</span>
      </a>
      <a class="item" href="https://bbs.usoftchina.com/" target="_blank">
        <span>U客论坛</span>
      </a>
      <nuxt-link to="/news" class="item">
        <span>优软快讯</span>
      </nuxt-link>
    </div>
  </nav>
</template>
<script>
  import { KindCategory } from '~components/home'
  export default {
    name: 'navView',
    data () {
      return {
        pcbId: process.env.pcbId,
        isChange: false
      }
    },
    components: {
      KindCategory
    },
    watch: {
      '$route.path': {
        handler: function (path) {
          if (path !== '/') {
            this.isChange = true
            // 直接设为false无作用，因此采用定时器
            setTimeout(() => {
              this.isChange = false
            }, 100)
          }
        }
      }
    },
//      '$route.params': {
//        handler: function (path) {
//          console.log(123)
//          this.isChange = true
//        }
//      }
//    },
    methods: {
      loadProductKinds (id) {
        this.$store.dispatch('loadAllProductKinds', {id})
      },
      goB2B () {
        if (this.user.logged) {
          window.location.href = `${process.env.uasUrl}#/index`
        } else {
          this.login(`${process.env.uasUrl}`)
        }
      }
    },
    created () {
      this.$store.dispatch('loadProductKinds', { id: 0 })
    }
  }
</script>
<style lang="scss" scoped>
  @import '~assets/scss/variables';
  $nav-height: 40px;
  .nav-list a span{
    font-size: 14px;
  }
  .nav-list {
    background-color: rgb(244, 248, 255);
    height: $nav-height;

    .item {
      display: inline-block;
      height: $nav-height;
      line-height: $nav-height;
      width: 121px;
      text-align: center;
      margin: 0;
      vertical-align: middle;
      color: $black-light;

      > span {
        padding: 5px 2px;
      }

      &.nuxt-link-active, &.active, &:not(.expand-item):hover {
        > span {
          color: #5078cb;
          border-bottom: #5078cb 3px solid;
          font-weight: bold;
        }
      }

      &.expand-item {
        position: relative;
        .expand-list {
          z-index: 10;
          position: absolute;
          left: 8px;
          top: 40px;
          background: #fff;
          width: 106px;
          border-radius: 2px;
          display: none;
          -webkit-box-shadow: 0 1px 12px 0 rgba(0,0,0,.2);
          -moz-box-shadow: 0 1px 12px 0 rgba(0,0,0,.2);
          box-shadow: 0 1px 12px 0 rgba(0,0,0,.2);
          li {
            height: 34px;
            line-height: 34px;
            text-align: center;
            span {
              color: #666;
            }
            &:hover {
              background: #5078cb;
              span {
                color: #fff;
              }
            }
          }
        }
        .icon-arrow-up {
          display: none;
        }
        &:hover {
          color: #2147f9;
          .expand-list {
            display: block;
          }
          .icon-arrow-up {
            display: inline-block;
          }
          .icon-arrow-down {
            display: none;
          }
        }
      }

      #kindCategory {
        display: none;
        font-weight: normal;
        text-align: left;
        z-index: 1001;
        top: 40px;
        left: 0;
      }

      &.item-first {
        width: 220px;
        margin: 0;
        background-color: rgb(33, 71, 151);
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        color: #fff;
        cursor: pointer;
        position: relative;
        &:hover {
          #kindCategory {
            display: block;
          }
        }
      }

      #kindCategory.change {
        display: none !important;
      }
    }
  }
</style>