Bug Type: Component

Environment

• Vue Version: 3.2.45
• Element Plus Version: 2.2.22
• Browser / OS: Chrome
• Build Tool: Vite

Reproduction

Related Component

• el-menu

Reproduction Link

Element Plus Playground

Steps to reproduce

Based on this thread: #8848

I have a menu like this:

<el-menu
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
:router="true"
:default-active="$route.path"

<el-menu-item index="1">Processing Center</el-menu-item>
<el-sub-menu index="2">
  <template #title>Workspace</template>
  <el-menu-item index="2-1">item one</el-menu-item>
  <el-menu-item index="2-2">item two</el-menu-item>
  <el-menu-item index="2-3">item three</el-menu-item>
  <el-sub-menu index="2-4">
    <template #title>item four</template>
    <el-menu-item index="2-4-1">item one</el-menu-item>
    <el-menu-item index="2-4-2">item two</el-menu-item>
    <el-menu-item index="2-4-3">item three</el-menu-item>
  </el-sub-menu>
</el-sub-menu>

When I route to localhost/1, localhost/2-1, localhost/2-4-2 etc. everything works prefect. BUT when I route to localhost/1 (first menu activated, fine) then I navigate to localhost/something none of the menu item will be activated. localhost/something has no menu item, as it is just some sub route for localhost/1 what doesn't need own menu item. The last activated menu item should keep its activated state.

There should be an option to keep last active menu index if there is no matching menu item index for current route.

Please advice,
Lajos

What is Expected?

If we use router for display active menu item, if there is no matching menu item index for current route the previous matching active menu item should keep active.

What is actually happening?

None of menu item will be active after we route to a new route without menu item matching index.

Additional comments

(empty)