vue中使用element-ui的menu选中项高亮的问题 在使用element中的menu组件时,根据官方文档,可以设置给el-menu设置router属性为:true,给el-menu-item设置index的值为路径,就可以实现点击导航跳转到指定路由。 这样做虽然能实现跳转,但是,若刷新浏览器,则导航会跳转到默认的选中项,而不是我们离开时的导航。 百度时大部分...
//菜单的背景色(仅支持 hex 格式)backgroundColor: String,//菜单的文字颜色(仅支持 hex 格式)textColor: String,//当前激活菜单的文字颜色(仅支持 hex 格式)activeTextColor: String,//当前激活菜单的 indexdefaultActive: String,//当前打开的sub-menu的 key 数组defaultOpeneds:...
{ name: '首页', url: '/', icon: 'el-icon-menu' }, { name: '用户管理', url: '/user', icon: 'el-icon-menu' } ] } }, methods: { edit(index) { // TODO: 编辑菜单 }, remove(index) { // TODO: 删除菜单 } } } </script> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 1...
使用的是el-menu默认的方法在el-menu标签设置router,给每个el-menu-item设置index代码如下: <el-menu :default-active="active" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" router > <el-menu-item index="index"> <i class="el-icon-menu"></i> ...
点击的时候不会选中菜单,页面不跳转。但是访问其他子页面后,通过浏览器回退按钮退回到index页面时,莫名就选中了2菜单栏,包括下面2个子菜单。如下图: error 想了下应该是子菜单没有设置唯一标志index。而且/index这个路由在menus中也找不到,所以就默认匹配index===null的路由了?于是给el-menu-item加上index,果然好...
在<el-menu>中需要--:default-active="this.$route.path"。用来绑定路由表 在<el-menu>中需要--router---或者router=true 在<el-submenu>中的index不可缺少,为必须值,不过此处的index仅为索引,用来让当前元素下的子菜单收缩或释放。每一个submenu的index值只要不一样便可 在<el...
default-active需要传进去的值就是子导航的index值(也就是其路由值),达到点击路由就可以引起高亮。 1.首先是在index处动态接收api里面的路由名称 2.然后点击事件时用函数获取路由名称 <!-- 二级菜单 --><el-menu-item:index="'/' + items.path"//首先是在index处动态接收api里面的路由名称v-for="items in...
-- 递归动态菜单 --> <myitem :data="menuArr"></myitem> </el-menu> js部分 import myitem from "./components/myitem.vue"; // 引入递归菜单组件 export default { name: "Home", components: { myitem, // 注册一下 }, data() { return { activeIndex: this.$route.path, menuArr: [.....
* @property {String} [defaultActive] 当前激活菜单的 index。 defaultActive = '1' * @property {Array} [defaultOpeneds] 当前打开的sub-menu的 key 数组。 defaultOpeneds = ['2', '4'] * @property {Boolean} [uniqueOpened = false] 是否只保持一个子菜单的展开 ...
<el-menu class="el-menu-demo navBar" :class="$route.fullPath.includes('/home') ? 'home' : 'other'" mode="horizontal" router> <el-menu-item v-for="(item, index) in menuList" :title="item.name" :key="index" :index="item.path"> ...