Element-Plus navigation bar refresh highlight disappears (solved)

business:

The highlight in the left navigation bar of the element item is displayed normally when clicked. Once the page is refreshed, the highlight disappears, but the page is still the page clicked before.

In order to solve this problem, I tried all the methods mentioned on the Internet, and finally found that one symbol was missing

Implementation:

<el-menu router :default-active="$route.path" class="el-menu-vertical" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" style="height:100%">
     <el-menu-item index="/Basic/News">
          <i class="el-icon-document"></i>
              <span slot="title">新闻维护</span>
     </el-menu-item>
     <el-menu-item index="/Basic/TrainingMaintenance">
          <i class="el-icon-document"></i>
              <span slot="title">培训维护</span>
     </el-menu-item>
</el-menu>

 main reason:

:default-active="$route.path"

Here default-active defines the index of the current active menu. I bind default-active to $route.path. For example, if the current page is news maintenance, then the value of default-active is /Basic/News, so that even if the page is refreshed The highlighting state is not lost either.

Realize the effect:

Notice:

• You must write router in el-menu, otherwise you cannot route and jump.
• Be sure to add a colon before default-active:

Reference: The solution to the highlight disappearing after refreshing under Vue+Element-UI_Xiaoding Chongya! Blog-CSDN Blog_vue3+ts will not be displayed once refreshed and highlighted, how to deal with it