Requirements: Click the button on the current page to jump to the home page and assign a value to the default-active bound in the menu.
Problem: The page has been redirected, but menu selection has not changed at all
Solution: Directly bind the route of the current page to default-active, and change the index to the current route. In this way, when jumping through the non-click navigation menu, there is no need to manually change the selected items of the navigation menu. It will select the tab items of the current page by itself, which will solve the problem perfectly!
Note: The router attribute is important, and default-active="this.$" is also important.
<el-menu
:router="true"
:default-active="$"
class="el-menu-demo"
mode="horizontal"
@select="select"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item :route="{name: 'home'}" index="home">
<template slot="title">
<Icon type="ios-home"></Icon>
<span>front page</span>
</template>
</el-menu-item>
<el-menu-item :route="{name: 'article'}" index="article">
<template slot="title">
<i class="el-icon-location"></i>
<span>article</span>
</template>
</el-menu-item>
<el-menu-item :route="{name: 'time'}" index="time">
<template slot="title">
<i class="el-icon-location"></i>
<span>Timeline</span>
</template>
</el-menu-item>
<el-menu-item :route="{name: 'photo'}" index="photo">
<template slot="title">
<i class="el-icon-location"></i>
<span>Life photos</span>
</template>
</el-menu-item>
<el-menu-item :route="{name: 'footprint'}" index="footprint">
<template slot="title">
<i class="el-icon-location"></i>
<span>Footprints</span>
</template>
</el-menu-item>
<el-menu-item :route="{name: 'aboutme'}" index="aboutme">
<template slot="title">
<i class="el-icon-location"></i>
<span>About me</span>
</template>
</el-menu-item>
<el-menu-item :route="{name: 'message'}" index="message">
<template slot="title">
<i class="el-icon-location"></i>
<span>Message board</span>
</template>
</el-menu-item>
<el-menu-item :route="{name: 'manage'}" index="manage">
<template slot="title">
<i class="el-icon-location"></i>
<span>Backend management</span>
</template>
</el-menu-item>
</el-menu>This is the end of this article about the MENU menu trapped in elementUI. For more related elementUI MENU menu content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!