使用element中的el-menu时候,我们使用路由高亮显示的时候,使用router 模式和default-active 当我们点击左侧菜单栏中的子路由时候,页面路由发生变化,左侧路由的选中状态就会消失,不会仍然保持选中。 我们可以通过route.matched来寻找当前子路由的上机路由, route.matched含义是与给定路由地址匹配的标准化的路由记录数组。就是...
设置:default-active即可。 可是如果不是从导航切换进页面的,比如从上一个页面里的按钮点击进入该界面,就不知道怎么设置当前选中项了。 那只能自己想办法了。 因为我的项目用了vue-router,页面通过<router-view></router-view>引入组件的,所以我就想,在进入组件的时候,设置公共变量值adminleftnavnum为导航的index,...
<el-menu:uniqueOpened="true"class="el-menu-vertical-demo"text-color="#fff"background-color="#272727"active-text-color="#ffd04b"@open="handleOpen"@close="handleClose":collapse="collapseMode":collapse-transition="false"router:default-active="activePath"><!-- 一级菜单 --><el-submenu:index="...
在el-menu组件里有这样一个属性,default-active用来表示当前激活菜单的 index 1、如果给default-active设置一个默认值,那么刷新页面时,会出现一个问题,即路由地址和菜单对应的index是不一致的。 <el-menu routerdefault-active="/"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"> i...
- default-active:设置默认选中的菜单项。 - unique-opened:是否只保持一个子菜单展开。 - router:是否开启路由模式,如果开启,点击菜单项会自动触发路由跳转。 下面是使用el-menu的示例代码: html <el-menu :default-active="activeIndex" mode="horizontal" router> <el-menu-item index="home">首页</el-menu...
然后在menu组件上设置default-active的值为:$route.name,这样就可以实现刷新时导航栏选中当前页的问题。最后设置el-menu-item的index属性为router.js文件里跳转路由的name值,route属性为:路由的path,如图: 通过这样设置,就可以实现刷新页面时,导航栏的选中项和页面显示一致,并且从b页面跳转到c页面时,还能保持b选中的...
7 因为还有子路由的菜单需要使用到el-submenu标签，它封装了展开/收起箭头。所以我们先从路由中提取出没有子路由的对象，直接通过el-menu-item标签来实现即可。而没有子菜单的菜单我们希望点击时能只能跳转路由，所以我们可以在el-menu-item外包裹个router-link标签，通过to属性来指向对应的路由。8 接着我们继续将...
1.要实现路由跳转,先要在el-menu标签上添加router属性,然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。 2.导航当前项,在el-menu标签中绑定 :default-active="$route.path",注意是绑定属性,不要忘了加“:”,当$route.path等于el-menu-item标签中的index属性值时...
<el-menu class="menu-main" router :default-active="route.path" unique-opened background-color="#18214C" text-color="#fff"> <menuItem v-for="item in menuList" :item="item" :key="item.path" /> </el-menu> </el-scrollbar> ...
itemindex="expensive">外卖太贵了</el-menu-item></el-submenu></el-menu></div></div><divclass="right"><router-view></router-view></div></div></template><script>exportdefault{name:"Home",data(){return{// 这里使用当前路由的name名字会更加好一点,就不会写死了,刷新还在的activeIndex:...