update

components/header.vue

@@ -6,7 +6,7 @@
       <div class="head-container-box mta-hidden-sm">
         <a :href="`${baseUrl}`" class="client-head-img"></a>
         <!-- H5菜单 -->
-        <h5Nav :class="navClass" @click="navChange"></h5Nav>
+        <h5Nav :class="navClass" @navChange="navChange"></h5Nav>
         <!-- 手机按钮 -->
         <div class="phone-nav-btn mta-hidden-sm" :class="{open: isOpen, close: !isOpen}" @click="changeHeadNav"></div>
       </div>

components/qgNav/H5Nav.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="phone-popper-box">
-    <nuxt-link to="/">首页</nuxt-link>
+    <nuxt-link to="/" :class="{'menu-active': curActive === 'shouye'}">首页</nuxt-link>
     <el-collapse>
-      <el-collapse-item title="产品与服务">
+      <el-collapse-item title="产品与服务" :class="{'menu-active': curActive === 'chanpinyufuwu'}">
         <nuxt-link :to="item.url" v-for="(item,index) in chanpinfuwu" :key="index" class="cpfw-popper-item">
           <i></i>
           <p>
@@ -11,7 +11,7 @@
           </p>
         </nuxt-link>
       </el-collapse-item>
-      <el-collapse-item title="解决方案">
+      <el-collapse-item title="解决方案" :class="{'menu-active': curActive === 'jiejuefangan'}">
           <div class="jjfa-popper-content">
             <h3>场景解决方案</h3>
             <div class="jjfa-link-box">
@@ -32,8 +32,8 @@
 
       </el-collapse-item>
     </el-collapse>
-    <nuxt-link to="/news" class="xwzx-row">新闻资讯</nuxt-link>
-    <nuxt-link to="/introduction">关于我们</nuxt-link>
+    <nuxt-link to="/news" class="xwzx-row" :class="{'menu-active': curActive === 'news'}">新闻资讯</nuxt-link>
+    <nuxt-link to="/introduction" :class="{'menu-active': curActive === 'introduction'}">关于我们</nuxt-link>
   </div>
 </template>
 
@@ -139,6 +139,37 @@ export default {
         }
       ],
     }
+  },
+  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'
+      }
+    }
+  },
+  watch: {
+    '$route.path': {
+      handler(newVal) {
+         console.log(newVal)
+        this.$emit('navChange')
+      },
+      immediate: true,
+    }
   }
 }
 </script>
@@ -192,6 +223,12 @@ export default {
   }
 
   // 菜单选中
-  .nuxt-link-active{color:#00b96b; }
+  .menu-active {
+    color: #00b96b;
+    div.el-collapse-item__header {
+      color: #00b96b;
+    }
+  }
+
 }
 </style>

components/qgNav/index.vue

@@ -163,7 +163,7 @@ export default {
       const jiejuefangan2 = this.hangye.map(item => item.url);
       const routerPath = this.$route.path
       // 首页
-      if (routerPath === '/') {
+      if (routerPath === '/' || routerPath === '/index') {
         return 'shouye'
       } else if (routerPath === '/news') {
         return 'news'