ant-design的menu，用this.$router.push到别的页面时，菜单栏没有更新这个路由地址。

Question

点击跳转到别的页面图

页面跳转了，但是menu并没有变化，只有再刷新才会重新获取地址再展开，这个如何解决呢？

changeView(name) {
      switch (name) {
        case "遥测":
          this.$router.replace({ path: "/stationRealTime" });
          break;
        case "母线":
          this.$router.replace({ path: "/busRealTime" });
          break;
        case "线路":
          this.$router.replace({ path: "/lineRealTime" });
          break;
        case "变压器":
          this.$router.push({ path: "/transRealTime" });
          break;
        case "发电机":
          this.$router.push({ path: "/PSrealTime" });
          break;
        case "无功补偿装置":
          this.$router.push({ path: "/statcomRealTime" });
          break;
        default:
          console.log("数据不存在");
      }
    },

html

<!-- ant的menu -->
<a-menu
            theme="dark"
            :openKeys="openKeys"
            @openChange="onOpenChange"
            mode="inline"
            :defaultSelectedKeys="defaultSelectedKeys"
          >
            <template v-for="item in menuList">
              <a-menu-item v-if="item.children === false" :key="item.router">
                <icon-font :class="item.class" :type="item.icon" />
                <router-link class="home-page" :to="item.router" >{{item.name}}</router-link>
              </a-menu-item>

              <a-sub-menu v-else :key="item.router">
                <span slot="title">
                  <icon-font :class="item.class" :type="item.icon" />
                  <span>{{item.name}}</span>
                </span>
                <a-menu-item v-for="menuChildren in item.children" :key="menuChildren.router">
                  <router-link style="display:block" :to="menuChildren.router">{{menuChildren.name}}</router-link>
                </a-menu-item>
              </a-sub-menu>
            </template>
          </a-menu>
          
          <!-- 显示子路由的router-view -->
          <a-layout-content>
          <router-view
            class="home-con"
            :default-active="$route.path"
          ></router-view>
        </a-layout-content>
        

js：

export default {
  name: "Home",
  data() {
    return {
      defaultSelectedKeys: [this.$route.path],
      openKeys: this.$store.state.openKeys,
      menuList,
    };
  },
  components: {
    "header-side": headerSide,
    IconFont,
  },
  created() {
    const result =  this.menuList;
    this.menuList = result; 
    this.showMenu(result);
  },
  mounted() {
    // 监听页面刷新事件
    window.addEventListener("unload", this.saveStatus);
   
  },
  computed: {
    collapsed: {
      get: function() {
        return this.$store.state.status.collapsed;
      },
      set: function(newData) {
        return newData;
      },
      activePath() {
        return this.$route.path;
      },
    },
  },
  methods: {
  // 保存侧边栏展开，关闭标识
    saveStatus() {
      sessionStorage.setItem(
        "changeStatus",
        JSON.stringify(this.$store.state.status.collapsed)
      );
    },
    
    // menu事件
    showMenu(result) {
      // console.log(this.$store.state.openKeys)
      for (let i = 0; i < this.menuList.length; i++) { 
        if (result[i].children !== false) {  
          for (let y = 0; y < result[i].children.length; y++) {  
            if (result[i].children[y].router === this.$route.path) { 
              this.openKeys = [result[i].router]
            }
          }
        }
      }
    },
    onOpenChange(openKeys) {
      console.log(this.$store.state.openKeys)
      if (openKeys.length !== 0) {
        this.openKeys = [openKeys[1]];
      } else {
        this.openKeys = [""];
      }
    },
    clickItem(obj) {
      this.$router.push(obj.key);
    },
  },
};

Answer 1

antd的menu无法更新选中和展开

1. home.vue

   <a-menu
       theme="dark"
       :openKeys="openKeys"
       @openChange="onOpenChange"
       @select="select"
       mode="inline"
       :defaultSelectedKeys="defaultSelectedKeys" // 这个是初始选中的菜单项 key 数组，改它是没用的
       :selectedKeys="selectedKeys" // 当前选中的菜单项 key 数组，要改变它
   ></a-menu>
   
   export default {
   data() {
       return {
         defaultSelectedKeys: [this.$route.path],
         menuList,
       };
   },
   computed: {
       selectedKeys() { // 当前选中
         return this.$store.state.selectedKeys;
       },
       openKeys: { // 当前展开
         get: function() {
           return this.$store.state.openKeys;
         },
         set: function(newData) {
           return this.$store.state.openKeys = newData;
         },
       },
     },  
    mounted() {
       // 监听页面刷新事件
       // 存在storage中的数据，刷新获取，以免vuex丢失数据
       window.addEventListener("unload", this.saveOpenKeys); 
       window.addEventListener("unload", this.saveSelectedKeys);
     },
    methods: {
       saveOpenKeys (){ // 存在storage中的 当前展开
         sessionStorage.setItem(
           "changeOpenKeys",
           JSON.stringify(this.$store.state.openKeys)
         );
       },
       saveSelectedKeys (){ // 存在storage中的 当前展选中
         sessionStorage.setItem(
           "changeSelectedKeys",
           JSON.stringify(this.$store.state.selectedKeys)
         );
       },
       
       showMenu(result) { // 获取菜单
         for (let i = 0; i < this.menuList.length; i++) { 
           if (result[i].children !== false) {  
             for (let y = 0; y < result[i].children.length; y++) {  
               if (result[i].children[y].router === this.$route.path) { 
                 this.openKeys = [result[i].router]
               }
             }
           }
         }
       },
       select(item){ // 当前点击选中事件
         // console.log(item)
         this.$store.state.selectedKeys = item.keyPath
         sessionStorage.setItem(
           "changeSelectedKeys",
           JSON.stringify(item.keyPath)
         );
       },
       onOpenChange(openKeys) { // 当前展开事件
         // console.log(openKeys)
         // // console.log()
         sessionStorage.setItem(
           "changeOpenKeys",
           JSON.stringify(openKeys)
         );
         this.$store.commit("onOpenChange", openKeys);
       },
     },
   }

2. state.js

   export default {
     openKeys: JSON.parse(sessionStorage.getItem("changeOpenKeys")) || ['/'], // 当前展开
     selectedKeys: JSON.parse(sessionStorage.getItem("changeSelectedKeys")) || ['/'],  // 当前选中
   };

3. mutations.js

   export const onOpenChange = (state, option) => { // 更新当前展开
     if (option.length !== 0) {
       state.openKeys = [option[1]];
     } else {
       state.openKeys = [""];
     }
   };
   export const changeSelectedKeys = (state, option) => { // 更新当前选中
     state.selectedKeys = option;
   };

15.1. 使用

1. 当前页跳到不同的页面，在即将进入的页面 commit 这两个 mutaion

   created() {    
       this.$store.commit("onOpenChange", ['/zoneDataOV',this.$route.path]);
       this.$store.commit("changeSelectedKeys", [this.$route.path]);
   }

2. 一个展开项里面把数据传到当前展开项的其他页面

   created() { // 只要更新选中就可以了
       this.$store.commit("changeSelectedKeys", [this.$route.path]);
   }