solve nav active bug

src/components/home/HomeHeader.vue

@@ -2,14 +2,14 @@
   <div class="header">
     <div class="menu-circle"></div>
     <div class="header-menu">
-      <!--      <router-link class="router" to="/home"><a class="menu-link is-active" >ALL</a></router-link>-->
-      <!--      <router-link class="router" to="/hotNews"><a class="menu-link notify">HotNews</a></router-link>-->
-      <!--      <router-link  class="router" to="/navDetail"><a class="menu-link">Discover</a></router-link>-->
-      <router-link class="menu-link is-active" to="/home">ALL</router-link>
-      <router-link class="menu-link notify" to="/news">HotNews</router-link>
-      <router-link class="menu-link" to="/navDetail">Discover</router-link>
-      <router-link class="menu-link notify" to="#">Market</router-link>
+      <router-link class="menu-link" active-class="is-active" v-for="(item,index) in tabList" v-if="tabList.length>0" :key="item.index" :to="item.path" >{{item.libel}}</router-link>
     </div>
+<!--    <el-menu class="header-menu" :default-active="$route.path" router background-color="#0C0F194C">-->
+<!--      <el-menu-item class="menu-link is-active" index="/home">ALL</el-menu-item>-->
+<!--      <el-menu-item class="menu-link notify" index="/news">HotNews</el-menu-item>-->
+<!--      <el-menu-item  class="menu-link" index="/navDetail">Discover</el-menu-item>-->
+<!--      <el-menu-item  class="menu-link notify" index="#">Market</el-menu-item>-->
+<!--    </el-menu>-->
     <div class="search-bar">
       <input type="text" placeholder="Search">
     </div>
@@ -35,8 +35,9 @@
         :visible.sync="loginDialogVisible"
         width="30vw"
         append-to-body
-        :close-on-click-modal="false"
-        :before-close="modalClose"
+        :show-close="false"
+        :close-on-click-modal="true"
+
     >
       <el-tabs type="border-card">
         <el-tab-pane>
@@ -172,6 +173,12 @@ export default {
   components: {},
   data() {
     return {
+      tabList:[
+          {path:'/home',libel:'ALL'},
+          {path:'/news',libel:'HotNews'},
+          {path:'/navDetail',libel:'navDetail'},
+          {path:'/#',libel:'TEST'},
+      ],
       loginDialogVisible: false,
       passwordVisible: "password",
       icon: "el-icon-view",
@@ -190,7 +197,8 @@ export default {
         captcha:null,
         password: null,
         repassword:null,
-      }
+      },
+      ind: '0', // 用ind作为选择标识
     }
   },
   mounted() {
@@ -202,6 +210,8 @@ export default {
   },
   computed: {},
   methods: {
+
+
     // 打开登陆注册
     openLoginDialog() {
       this.loginDialogVisible = true;
@@ -288,10 +298,16 @@ export default {
 
 }
 </script>
-<style scoped>
+<style>
 .dialog {
   backdrop-filter: blur(20px);
 }
+.el-dialog {
+  background: rgba(255, 255, 255, 0.98);
+}
+.el-dialog__header {
+  display: none;
+}
 
 
 </style>

src/components/hotNews/HotNews.vue

@@ -1,11 +1,10 @@
-
-
 <template>
   <div>
     666
   </div>
 </template>
 <script>
+import {getHotNews} from '@/api/api'
 export default {
   name: "HotNews",
   components: {},
@@ -13,13 +12,19 @@ export default {
     return {}
   },
   mounted() {
-
+  this.getNews();
   },
   created() {
 
   },
   computed: {},
-  methods: {}
+  methods: {
+    getNews(){
+      getHotNews().then(response=>{
+        console.log(response);
+      })
+    }
+  }
 }
 </script>
 <style scoped>