修复dock菜单的路由

src/components/ui/BottomDock.vue

@@ -9,9 +9,15 @@
         <div class="dock-list-container" ref="listContainer" @scroll="checkScrollState">
             <div class="dock-list">
                 <div v-for="(item, index) in dockItems" :key="index" class="dock-item"
-                    @click="handleSelect(index, item)">
+                    :class="{ 'is-active': activeIndex === index, [`theme-${item.theme}`]: item.theme}"
+                    @click="handleSelect(index, item)"
+                    @mouseenter="hoverIndex = index"
+                    @mouseleave="hoverIndex = null"
+                    >
                     <div class="item-icon">
-                        <img v-if="item.imgUrl" :src="item.imgUrl" class="custom-icon" />
+                        <img v-if="item.imgUrl" 
+                        :src="(activeIndex === index || hoverIndex === index) && item.activeImgUrl ? item.activeImgUrl : item.imgUrl" 
+                        class="custom-icon" />
 
                         <i v-else :class="item.iconClass"></i>
                     </div>
@@ -33,8 +39,8 @@ export default {
     name: 'BottomDock',
     data() {
         return {
-            activeIndex: 3,
-            // 新增两个状态变量，控制左右按钮的状态
+            activeIndex: 0,
+            hoverIndex: null,
             canScrollLeft: false, // 初始默认在最左侧，所以左侧不能滚
             canScrollRight: true, // 初始默认右侧有内容，可以滚
             dockItems: [
@@ -42,31 +48,43 @@ export default {
                 {
                     label: '首页',
                     imgUrl: require('@/assets/main/main-home.png'),
+                    activeImgUrl: require('@/assets/main/main-home-hover.png'),
+                    route: '/home',
                     theme: 'blue',
                 },
                 {
                     label: '状态监控',
                     imgUrl: require('@/assets/main/main-surve.png'),
+                    activeImgUrl: require('@/assets/main/main-surve-hover.png'),
+                    route: '/surve',
                     theme: 'blue',
                 },
                 {
                     label: '特勤安保',
                     imgUrl: require('@/assets/main/main-security.png'),
+                    activeImgUrl: require('@/assets/main/main-security-hover.png'),
+                    route: '/security',
                     theme: 'gold',
                 },
                 {
                     label: '干线协调',
                     imgUrl: require('@/assets/main/main-coor.png'),
+                    activeImgUrl: require('@/assets/main/main-coor-hover.png'),
+                    route: '/coor',
                     theme: 'blue',
                 },
                 {
-                    label: '状态展示',
+                    label: '数据分析',
                     imgUrl: require('@/assets/main/main-watch.png'),
+                    activeImgUrl: require('@/assets/main/main-watch-hover.png'),
+                    route: '/watch',
                     theme: 'blue',
                 },
                 {
                     label: '系统设置',
                     imgUrl: require('@/assets/main/main-setting.png'),
+                    activeImgUrl: require('@/assets/main/main-setting-hover.png'),
+                    route: '/setting',
                     theme: 'blue',
                 },
                 // (建议多加几个测试数据，撑爆容器宽度，才能看到滚动和状态切换)
@@ -88,6 +106,14 @@ export default {
             ]
         };
     },
+    watch: {
+        $route() {
+            this.updateActiveIndexByRoute();
+        }
+    },
+    created() {
+        this.updateActiveIndexByRoute();
+    },
     mounted() {
         // 组件挂载后，等 DOM 渲染完毕，立即计算一次初始状态
         this.$nextTick(() => {
@@ -101,9 +127,35 @@ export default {
         window.removeEventListener('resize', this.checkScrollState);
     },
     methods: {
+        updateActiveIndexByRoute() {
+            const currentPath = this.$route.path;
+            console.log(currentPath)
+            // 查找当前路由路径匹配的菜单项索引
+            const matchIndex = this.dockItems.findIndex(item => {
+                // 精确匹配：item.route === currentPath
+                // 模糊匹配（推荐）：当前路径包含菜单的路由（解决含有子路由 /monitor/detail 时底部也高亮的问题）
+                return item.route && currentPath.startsWith(item.route);
+            });
+
+            // 如果找到了对应的菜单，就更新 activeIndex
+            if (matchIndex !== -1) {
+                this.activeIndex = matchIndex;
+            }
+        },
         handleSelect(index, item) {
             if (this.activeIndex === index) return;
             this.activeIndex = index;
+
+            // 【新增路由跳转逻辑】
+            if (item.route) {
+                // 使用 catch 拦截重复点击同一个路由时的 NavigationDuplicated 报错
+                this.$router.push(item.route).catch(err => {
+                    if (err.name !== 'NavigationDuplicated') {
+                        console.error('路由跳转失败:', err);
+                    }
+                });
+            }
+
             this.$emit('change', item);
         },
 

src/router/index.js

@@ -19,8 +19,8 @@ export default new Router({
     { path: "/main", component: Main },
     { path: "/transition", component: TransitionPage },
     { path: "/home", component: Home },
-    { path: "/main-watch", component: MainWatch },
-    { path: "/main-surve", component: StatusMonitoring },
-    { path: "/main-security", component: SpecialSituationMonitoring }
+    { path: "/watch", component: MainWatch },
+    { path: "/surve", component: StatusMonitoring },
+    { path: "/security", component: SpecialSituationMonitoring }
   ]
 });

src/views/Home.vue

@@ -412,11 +412,11 @@ deviceTab: "signal",
 
       modules: [
         { key: "home", title: "首页", img: "main-home", route: { path: "/home" } },
-        { key: "watch", title: "状态监控", img: "main-watch", route: { path: "/home", query: { panel: "watch" } } },
-        { key: "vip", title: "特勤安保", img: "main-security", route: { path: "/home", query: { panel: "security" } } },
-        { key: "corr", title: "干线协调", img: "main-coor", route: { path: "/home", query: { panel: "coor" } } },
-        { key: "overview", title: "状态展示", img: "main-surve", route: { path: "/home", query: { panel: "surve" } } },
-        { key: "settings", title: "系统设置", img: "main-setting", route: { path: "/home", query: { panel: "setting" } } }
+        { key: "watch", title: "状态监控", img: "main-watch", route: { path: "/watch", query: { panel: "watch" } } },
+        { key: "vip", title: "特勤安保", img: "main-security", route: { path: "/security", query: { panel: "security" } } },
+        { key: "corr", title: "干线协调", img: "main-coor", route: { path: "/coor", query: { panel: "coor" } } },
+        { key: "overview", title: "状态展示", img: "main-surve", route: { path: "/surve", query: { panel: "surve" } } },
+        { key: "settings", title: "系统设置", img: "main-setting", route: { path: "/setting", query: { panel: "setting" } } }
       ],
       activeModule: "home",
       hoverModule: "",

src/views/Main.vue

@@ -62,11 +62,11 @@ export default {
             // 6 个功能（route 先对齐到你当前路由：目前只有 /home 可落地，其它模块先通过 query 标记，避免 404）
       items: [
         { key: "home", label: "首页", img: "main-home", route: { path: "/home" } },
-        { key: "surve", label: "状态监控", img: "main-surve", route: { path: "/main-surve", query: { panel: "surve" } } },
-        { key: "security", label: "特勤安保", img: "main-security", route: { path: "/main-security", query: { panel: "security" } } },
-        { key: "coor", label: "干线协调", img: "main-coor", route: { path: "/home", query: { panel: "coor" } } },
-        { key: "watch", label: "数据分析", img: "main-watch", route: { path: "/main-watch", query: { panel: "watch" } } },
-        { key: "setting", label: "系统设置", img: "main-setting", route: { path: "/home", query: { panel: "setting" } } },
+        { key: "surve", label: "状态监控", img: "main-surve", route: { path: "/surve", query: { panel: "surve" } } },
+        { key: "security", label: "特勤安保", img: "main-security", route: { path: "/security", query: { panel: "security" } } },
+        { key: "coor", label: "干线协调", img: "main-coor", route: { path: "/coor", query: { panel: "coor" } } },
+        { key: "watch", label: "数据分析", img: "main-watch", route: { path: "/watch", query: { panel: "watch" } } },
+        { key: "setting", label: "系统设置", img: "main-setting", route: { path: "/setting", query: { panel: "setting" } } },
       ],
 
       // 亮点