更新 菜单栏显示选中逻辑

src/components/Aside.vue

@@ -1,27 +1,36 @@
 <template>
   <el-menu
-    style="width: 220px; height: 100%"
     :default-active="this.$store.state.currentMenuItem"
-    class="el-menu-vertical-demo"
+    style="width: 220px; height: 100%"
     background-color="#141B29"
     text-color="#fff"
     active-text-color="#ffd04b"
     :router="true"
   >
-    <el-submenu v-for="item in menu" :key="item">
+    <el-submenu v-for="(item, index) in menu" :key="item" :index="index">
       <template v-slot:title>
         <i :class="item.icon"></i>
         <span>{{ item.title }}</span>
       </template>
-      <el-menu-item v-for="son in item.items" :index="son.path" :key="son">
+      <el-menu-item
+        v-for="son in item.items"
+        :index="son.path"
+        :key="son"
+        @click="changeIndex(son.path)"
+      >
         {{ son.name }}
       </el-menu-item>
     </el-submenu>
   </el-menu>
 </template>
 <script>
+import { ref } from "vue";
 export default {
   setup() {
+    let defaultActive = ref();
+    function changeIndex(path) {
+      defaultActive.value = path;
+    }
     let menu = [
       {
         icon: "el-icon-s-unfold",
@@ -84,6 +93,8 @@ export default {
     ];
 
     return {
+      changeIndex,
+      defaultActive,
       menu,
     };
   },

src/main.js

@@ -31,6 +31,7 @@ router.beforeEach(async (to, from, next) => {
 router.afterEach((to, from) => {
   let { title } = to.meta;
   document.title = title;
+  store.commit("setCurrentMenuItem", to.path);
   store.commit("changefirstTitle", title);
 });
 app.config.globalProperties.check = () => {

src/store/index.js

@@ -5,7 +5,7 @@ const store = createStore({
     isLogin: false,
     firstTitle: "",
     secondTitle: "",
-    currentMenuItem: "",
+    currentMenuItem: "/cargoOwnerManage/cargoOwnerList",
   },
   mutations: {
     changefirstTitle(state, text) {