perf: 页面切换按钮跳转逻辑优化

app/src/components/Headers.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="header">
       <div class="title-card">
-        <li class="bg-img" @click="ConfirmBtn({ id: 1, url: '/home' })" :class="getClass(1)">
+        <li class="bg-img" @click="ConfirmBtn({  url: '/home' })" :class="getClass(1)">
           <img src="../assets/images/Vector.png" alt="" />
           <linear-text
             text="总览"
@@ -69,30 +69,24 @@ export default {
       titleList: [
         {
           name: "基础信息",
-          id: 2,
           url: '/basic'
         },
         {
           name: "消防管理",
-          id: 3,
         },
         {
           name: "风险预警",
-          id: 4,
         },
       ],
       titleList1: [
         {
           name: "警情动态",
-          id: 5,
         },
         {
           name: "火灾情况",
-          id: 6,
         },
         {
           name: "消防物联网",
-          id: 7,
         },
       ],
       test: 1,
@@ -104,7 +98,6 @@ export default {
   },
   methods: {
     ConfirmBtn(item) {
-      this.flag = item.id;
       if (this.$route.path !== item.url) {
         this.$router.push(item.url)
       }
@@ -116,6 +109,15 @@ export default {
   created() {
     console.log(this);
   },
+  watch: {
+    $route: {
+      handler(route) {
+        this.flag = route.meta.id
+      },
+      immediate: true,
+      deep: true
+    }
+  }
 };
 </script>
 

app/src/router/index.js

@@ -19,12 +19,18 @@ const router = new VueRouter({
         {
           path: '/home',
           name: 'home-page',
-          component: HomePage
+          component: HomePage,
+          meta: {
+            id: 1,
+          }
         },
         {
           path: '/basic',
           name: 'basic-page',
-          component: BasicInfo
+          component: BasicInfo,
+          meta: {
+            id: 2,
+          }
         }
       ]
     }