菜单刷新之后高亮不在此menu，怎么样才能让它在页面刷新之后，menu的高亮样式还是这个menu

Question

这个现在都有存储上，默认显示了是第一个menu，但是无法改变menu值。

高亮样式：

我给改变选中menu的key值的函数加了个debugger，结果他显示的是我的其他页面。。。

openKeys: 展开的menu。
selectedKeys：选中的子集menu。
computed代码：

    openKeys:{
      get: function() {
        this.$store.state.keys.openKeys = ['sub1'];
        return this.$store.state.keys.openKeys;
      },
      set: function(newData) {
        return newData;
      },
    },
    selectedKeys:{
      get: function() {
        this.$store.state.keys.selectedKeys = ['1'];
        return this.$store.state.keys.selectedKeys;
      },
      set: function(newData) {
        return newData;
      },
    },

mounted代码：

// 监听页面刷新事件
window.addEventListener("unload", this.saveKeys);

methods代码：

// 保存到seesionStorage中
saveKeys() {
      sessionStorage.setItem(
        "openKeys",
        JSON.stringify(this.$store.state.keys.openKeys)
      );
      sessionStorage.setItem(
        "selectedKeys",
        JSON.stringify(this.$store.state.keys.selectedKeys)
      );
    },
    // 改变选中menu的key值
     onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
      this.$nextTick(() => {
        if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
          this.openKeys = openKeys;
        } else {
          this.openKeys = latestOpenKey ? [latestOpenKey] : [];
        }
      })
    },

vuex-state:

keys: {
    openKeys: JSON.parse(sessionStorage.getItem("openKeys")),
    selectedKeys: JSON.parse(sessionStorage.getItem("selectedKeys")),
  }~~~~

Answer 1

不需要用vuex和storage，使用route也可以直接实现。
html代码：

<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">
        <a-icon :type="item.icon" />
        <span>{{ item.name }}</span>
      </a-menu-item>

      <a-sub-menu v-else :key="item.router">
        <span slot="title"
          ><a-icon :type="item.icon" /><span>{{item.name}}</span></span
        >
        <a-menu-item v-for="menuChildren in item.children" :key="menuChildren.router">
          <router-link :to="menuChildren.router">{{menuChildren.name}}</router-link>
        </a-menu-item>
      </a-sub-menu>
    </template>
  </a-menu>

js代码：

data() {
    return {
      defaultSelectedKeys: [this.$route.path],
      openKeys: [""],
      menuList,
    };
},
created() {
    const result =  this.menuList;
    this.menuList = result; 
    this.showMenu(result);
},
methods: {
    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]
            }
          }
        }
      }
    },
    onOpenChange(openKeys) {
      if (openKeys.length !== 0) {
        this.openKeys = [openKeys[1]];
      } else {
        this.openKeys = [""];
      }
    },
    clickItem(obj) {
      this.$router.push(obj.key);
    },
},

列表数据：

// 此处为动态获取的菜单数组
const menuList = [
  {
    name: "首页",
    router: "/home",
    icon: "database",
    children: false,
  },
  {
    name: "总览",
    router: "/",
    icon: "appstore",
    children: [
      {
        name: "实时数据总览",
        router: "/",
      },
      {
        name: "历史数据总览",
        router: "/historyCheckOV",
      },
    ],
  },
  {
    name: "场站",
    router: "/stationRealTime",
    icon: "database",
    children: [
      {
        name: "场站实时数据",
        router: "/stationRealTime",
      },
      {
        name: "场站历史数据",
        router: "/stationHistory",
      },
      {
        name: "场站数据异常",
        router: "/stationAbnormal",
      },
    ],
  },
  {
    name: "母线",
    router: "/busRealTime",
    icon: "branches",
    children: [
      {
        name: "母线实时数据",
        router: "/busRealTime",
      },
      {
        name: "母线历史数据",
        router: "/busHistory",
      },
      {
        name: "母线数据校核",
        router: "/busDataCheck",
      },
    ],
  },
  {
    name: "发电机",
    router: "/PSrealTime",
    icon: "interaction",
    children: [
      {
        name: "发电机实时数据",
        router: "/PSrealTime",
      },
      {
        name: "发电机历史数据",
        router: "/PShistrory",
      },
      {
        name: "发电机数据校核",
        router: "/PSdataCheck",
      },
    ],
  },
  {
    name: "线路",
    router: "1",
    icon: "pull-request",
    children: [],
  },
  {
    name: "变压器",
    router: "2",
    icon: "table",
    children: [],
  },
  {
    name: "无功补偿装置",
    router: "3",
    icon: "database",
    children: [],
  },
  {
    name: "质量标注",
    router: "4",
    icon: "file-done",
    children: [],
  },
];

Answer 2

a-menu添加v-show，判断有数据时，再进行渲染即可；

Answer 3

遇事不决就用$nextTick大法，再不行就给他setTimeout一下~~~