element-ui的侧栏和顶栏导航点击菜单就不见了侧栏导航和高亮问题

1.第一个问题是:在侧栏菜单中点击商品评价的按钮的时候,就不见了自身的侧栏菜单
2.第二个问题是:如果点击商品评价的按钮的时候,在顶栏菜单中反馈的按钮导航高亮不见了的问题

请求大神能否解决我上面的问题?十分谢谢!

以下我的代码:

<!-- 侧栏导航 -->
                  <el-aside width="230px" style="background-color: rgb(238, 241, 246)">
                        <el-menu :default-active="$route.path"
                         @open="handleOpen" 
                         @close="handleClose"
                         router unique-opened>
                              <!-- 订单管理 -->
                              <el-submenu index="/order/orderspaid" v-show="activeIndex == '/order/orderspaid'">
                                    <template slot="title">
                                          <i class="el-icon-message"></i>订单管理</template>
                                          <el-menu-item index="/order/orderspaid">已支付订单</el-menu-item>
                                          <el-menu-item index="/order/unpaidorders">未支付订单</el-menu-item>
                               <!-- 商城管理 -->
                              <el-submenu index="/goods" v-show="activeIndex == '/goods'">
                                    <template slot="title">
                                     <i class="el-icon-setting"></i>商城管理</template>
                                    <el-menu-item index="/goods">商城列表</el-menu-item>
                                    <el-menu-item index="/goods/add">增加商品</el-menu-item>
                                    
                              <!-- 反馈管理 -->
                              <el-submenu index="/fan" v-show="activeIndex == '/fan'">
                                    <template slot="title">
                                          <i class="el-icon-setting"></i>反馈管理</template>
                                    <el-menu-item index="/fan">反馈列表</el-menu-item>
                                    <el-menu-item index="/fan/goods">商品评价</el-menu-item>
                                    <el-menu-item index="/fan/order">订单评价</el-menu-item>
                              </el-submenu>

                        </el-menu>
                  </el-aside>
                  
                  <!-- 顶栏导航 -->
                  <el-col :span="24" style="display:inline-block;" class="dinglan">
                        <el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal" router>
                              <el-menu-item index="/order/orderspaid">订单</el-menu-item>
                              <el-menu-item index="/goods">商城</el-menu-item>

                              <el-menu-item index="/fan">反馈</el-menu-item>

                       </el-menu>

                        <div class="line"></div>
                  </el-col>
                  
                  
                 

export default {
  data() {
    return {
      username: '',
      activeIndex: "/order/orderspaid"
    };
  },
 created () {
      this.defaultIdex()
},
  methods: {
        handleSelect(key, keyPath) {
              console.log(key, keyPath);
        },
        defaultIdex() {
              var path = this.$route.path;
              console.log(this.$route.matched[1].path);
        },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }

  },
  beforeUpdate() {
     this.activeIndex = this.$route.matched[1].path
  }
        
  }
};

以下图片:
图片描述

图片描述

图片描述

阅读 3.9k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题