nuxtProject/components/mtaNav/pcNav.vue

<template>
  <div class="header-menu">
    <nuxt-link to="/" :class="{active : curActive === 'shouye'}">首页</nuxt-link>
    <nuxt-link to="/cpyfw" class="xwzx-row" :class="{'active': curActive === 'cpyfw'}">产品与服务</nuxt-link>
    <nuxt-link to="/news" class="xwzx-row" :class="{'active': curActive === 'news'}">新闻中心</nuxt-link>
    <nuxt-link to="/gywm" :class="{active: curActive === 'gywm'}">关于我们</nuxt-link>
  </div>
</template>

<script>
export default {
  name: "pcNav",
  data() {
    return {
    }
  },
  methods:{
    headNavClick(){
      this.$emit('headNavClick')
    },
    kckfBtn(){
      this.$router.push({ path: '/courseware/synopsis' });
    },
  },
  computed: {
    curActive() {
      const routerPath = this.$route.path
      // 首页
      if (routerPath === '/' || routerPath === '/index') {
        return 'shouye'
      }  else if (routerPath === '/cpyfw') {
        return 'cpyfw'
      }else if (routerPath === '/news') {
        return 'news'
      } else if (routerPath === '/gywm') {
        return 'gywm'
      }
    }
  },
  watch: {
    '$route.path': {
      handler(newVal) {
        console.log(newVal)
        this.$emit('navChange',newVal)
      },
      immediate: true,
    }
  }
}
</script>
<style lang="scss">


</style>