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

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: