The problem that the elementui sidebar menu is not selected and highlighted after refreshing

In the sidebar.vue file,
first, set default-active in the elmenu component:

<el-menu
      :show-timeout="200"
      :default-active="activerouter" //重点
      :collapse="isCollapse"
      :default-openeds="openeds"
      background-color="#FFFFFF"
      text-color="#000000"
      active-text-color="#000000"
    >

2. Declare in data

data() {
    return {
      activerouter: '',
      }
   }

3. Get the route in mounted

this.activerouter = this.$route.path;

4. The style when selected

<style lang="scss">
.router-link-active {
  font-weight: bold;
}
.router-link-exact-active {
  font-weight: bold;
}
</style

In this way, after the page is refreshed, it is also selected.

Guess you like

Origin blog.csdn.net/buukyjmvni/article/details/119378850