nuxtProject/components/qgNav/index.vue

<template>
  <div class="header-nav">
    <nuxt-link to="/" :class="{active : curActive === 'shouye'}">首页</nuxt-link>

    <el-popover
      placement="bottom"
      trigger="hover"
      popper-class="head-popper-box cp-popper-box"
    >
        <nuxt-link :to="item.url" v-for="(item,index) in chanpinfuwu" :key="index" class="head-popper-item">
          <i></i>
          <p>
            <span class="head-popper-title">{{ item.title }}</span>
            <span class="head-popper-des">{{ item.des }}</span>
          </p>
        </nuxt-link>
      <span class="head-nav-btn" slot="reference" :class="{active: curActive === 'chanpinyufuwu'}">产品与服务<i class="el-icon-arrow-down el-icon--right"></i></span>
    </el-popover>

    <el-popover
      placement="bottom"
      trigger="hover"
      popper-class="head-popper-box jj-popper-box"
    >
      <div class="head-popper-content">
        <div>
          <h3>场景解决方案</h3>
          <div class="head-popper-cj-row">
            <nuxt-link :to="item.url" v-for="(item,index) in changjing" :key="index" class="head-popper-item">
              <i></i>
              <p>
                <span class="head-popper-title">{{ item.title }}</span>
                <span class="head-popper-des">{{ item.des }}</span>
              </p>
            </nuxt-link>
          </div>
        </div>
        <em></em>
        <div>
          <h3>行业解决方案</h3>
          <div class="head-popper-hy-row">
            <nuxt-link :to="item.url" v-for="(item,index) in hangye" :key="index" class="head-popper-item">
              <i></i>
              <p>
                <span class="head-popper-title">{{ item.title }}</span>
                <span class="head-popper-des">{{ item.des }}</span>
              </p>
            </nuxt-link>
          </div>
        </div>
      </div>
      <span class="head-nav-btn" slot="reference" :class="{active: curActive === 'jiejuefangan'}">解决方案<i class="el-icon-arrow-down el-icon--right"></i></span>
    </el-popover>

    <nuxt-link to="/news" :class="{active: curActive === 'news'}">新闻资讯</nuxt-link>
    <nuxt-link to="/introduction" :class="{active: curActive === 'introduction'}">关于我们</nuxt-link>
  </div>
</template>

<script>
export default {
  name: "qg-nav",
  data() {
    return {
      chanpinfuwu: [
        {
          title: '考试系统',
          des: '一款简单、好用的考试系统',
          url: '/product/exam'
        },
        {
          title: '培训系统',
          des: '企业一站式在线培训系统',
          url: '/product/peixun'
        },
        {
          title: '课程定制',
          des: '为企业量身定做专属课程',
          url: '/product/courseCustom'
        },
        {
          title: '课程资源',
          des: '企业优质通用课程资源',
          url: '/product/courseResource'
        }
      ],
      changjing: [
        {
          img: '#',
          title: '严肃考试',
          des: '智能防作弊解决方案',
          url: '/solution/exam',
        },
        {
          img: '#',
          title: '企业培训',
          des: '企业在线培训解决方案',
          url: '/solution/peixun'
        },
        {
          img: '#',
          title: '万人高并发',
          des: '系统高并发解决方案',
          url: '/solution/erupt'
        },
        {
          img: '#',
          title: '私有化部署',
          des: '企业私有化解决方案',
          url: '/solution/privatization'
        }
      ],
      hangye: [
        {
          img: '#',
          title: '机关事业单位',
          des: '机关事业单位培训解决方案',
          url: '/solution/government'
        },
        {
          img: '#',
          title: '教育机构',
          des: '教育培行业解决方案',
          url: '/solution/education'
        },
        {
          img: '#',
          title: '能源化工',
          des: '能源化工行业解决方案',
          url: '/solution/energy'
        },
        {
          img: '#',
          title: '金融保险',
          des: '金融保险行业解决方案',
          url: '/solution/financial'
        },
        {
          img: '#',
          title: '食品餐饮',
          des: '食品餐饮行业解决方案',
          url: '/solution/biteAndSup'
        },
        {
          img: '#',
          title: '交通运输',
          des: '交通运输行业解决方案',
          url: '/solution/transportation'
        },
        {
          img: '#',
          title: '医疗行业',
          des: '医疗行业解决方案',
          url: '/solution/medical'
        }
      ],
    }
  },
  computed: {
    curActive() {
      const chanpinyufuwu = this.chanpinfuwu.map(item => item.url);
      const jiejuefangan = this.changjing.map(item => item.url);
      const jiejuefangan2 = this.hangye.map(item => item.url);
      const routerPath = this.$route.path
      // 首页
      if (routerPath === '/' || routerPath === '/index') {
        return 'shouye'
      } else if (routerPath === '/news') {
        return 'news'
      } else if (routerPath === '/introduction') {
        return 'introduction'
      } else if (chanpinyufuwu.some(path => path === routerPath)) {
        return 'chanpinyufuwu'
      } else if (jiejuefangan.some(path => path === routerPath)) {
        return 'jiejuefangan'
      } else if (jiejuefangan2.some(path => path === routerPath)) {
        return 'jiejuefangan'
      }
    }
  }
}
</script>