/* elementUI中的el-menu有一个属性,叫做default-active,表示当前激活菜单的index,面包屑是通过$route展示的,$route中有path,表示要跳转的页面的路由地址
:default-active = "$route.path" 就表示激活要跳转的页面的导航菜单
*/
<el-menu
:default-active="$route.path"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
router
>
<!--
router 是否使用vue-router路由模式,启用后点击菜单时会以index作为path进行路由跳转
default-active 当前激活菜单的index
-->
<el-menu-item index="/index">
<i class="el-icon-menu"></i>
<span slot="title">后台首页</span>
</el-menu-item>
<el-submenu index="/system">
<template slot="title">
<i class="el-icon-location"></i>
<span>系统设置</span>
</template>
<el-menu-item index="/system/menu">菜单管理</el-menu-item>
<el-menu-item index="/system/role">角色管理</el-menu-item>
<el-menu-item index="/system/user">管理员管理</el-menu-item>
</el-submenu>
</el-menu>
vue项目中,点击面包屑跳转至对应页面,导航不显示激活
于 2022-02-22 22:36:05 首次发布