The sidebar navigation and top bar navigation of element-ui disappear from the sidebar navigation and highlighting problems when clicking on the menu.

1. The first problem is that when you click the item evaluation button in the sidebar menu, you lose your own sidebar menu
2. The second problem is: if you click the item evaluation button, the feedback button in the top bar menu navigates the problem that the highlight is missing

can I ask the Great God to solve the problem above me? Thank you very much!

the following is my code:

<!--  -->
                  <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
  }
        
  }
};

the following pictures:

Menu