使用<el-menu> 侧面导航栏选中后页面刷新 不高亮显示选中项的问题

使用 侧面导航栏选中后页面刷新 不高亮显示选中项

img

            <el-aside width="300px">
              <div class="subNavCurrent">
                <h3 style="margin-top: -25px; margin-left: 15px">产品中心h3>
              div>
              <el-row>
                <el-col class="subNav" :span="12">
                  <el-menu
                    active-text-color="#ffd04b"
                    background-color="#545c64"
                    class="el-menu-vertical-demo"
                    :default-active="defaultActive"
                    text-color="#fff"
                    :default-openeds="openeds"
                    @select="categorySelect"
                  >
                    <div v-for="iteam in categoryList" :key="iteam.id">
                      <el-sub-menu
                        index="1"
                        v-if="iteam.parentCategCode == '1000001'"
                      >
                        <template #title>
                          <el-icon><location />el-icon>
                          <span>{{ iteam.categoryDesc }}span>
                        template>
                        <div v-for="iteam in categoryList" :key="iteam.id">
                          <el-menu-item
                            :index="iteam.categoryCode"
                            v-if="iteam.parentCategCode == '1000002'"
                            >{{ iteam.categoryDesc }}
                        div>
                      el-sub-menu>
                    div>
                  el-menu>
                el-col>
              el-row>
            el-aside>


//获取分类列表
    async getCategoryList() {
      const { data } = await getClassificationList();
      this.categoryList = data;
      let item = data.find((item) => {
        return item.categoryCode == this.categoryCode;
      });
      if (item != null) {
        this.categoryList = data;
        this.defaultActive = item.categoryCode;
        console.log("this.defaultActive",this.defaultActive)
      } else {
        this.$message.error("请选择对应分类!");
      }
    },

//切换分类
    categorySelect(key, keyPath) {
      console.log("key" + key, "keyPath" + keyPath);
      if (key != null) {
        this.$router.push({
          path: this.redirect || "/empty",
          query: { categoryCode: key },
        });
      } else {
        this.$message.error("请选择对应分类!");
      }
    },


img

router 属性 设为 true试试

https://element.eleme.io/#/zh-CN/component/menu#menu-attribute

我看你代码 不是 以路由形式 。那可能需要 记录下来当前的 default-active 然后 页面一进来 就赋值这个属性

你在页面刷新后还可以拿到当前页面的categoryCode吗?如果能拿到的话给defaultActive重新赋值一下

你试试这个

created() {
this.defaultActive =this.$route.path (当前路径)
}