Vue之ElementUI导航菜单

参考如下：

https://element.eleme.io/#/zh-CN/component/menu

先直接遍历路由列表，显示需要显示的导航元素。

    <el-menu :default-active="$route.path" mode="horizontal" @select="handleSelect"><template v-for="(item,index) in this.$router.options.routes"><el-menu-item :index="item.path" :key="index" >{{item.name}}</el-menu-item></template></el-menu>

@select="handleSelect"

设置选择的方法

    handleSelect (key, keyPath) {console.log(key, keyPath)this.$router.push(key)}

选择方法直接跳转到指定的路由

效果如下：

Vue之ElementUI导航菜单相关推荐

vue、Menu 导航菜单、Menu属性事件、vue Menu 全部导航菜单、vue Menu 全部属性事件
vue.Menu 导航菜单.Menu属性事件.vue Menu 全部导航菜单.vue Menu 全部属性事件设计规则何时使用代码演示顶部导航内嵌菜单缩起内嵌菜单只展开当前父级菜单垂直菜 ...
vue vue-router ElementUI导航栏重复点菜单报错问题
在使用Element-UI中的导航时,默认情况下如果重复点击某选项,会报错. 可以在router的配置文件中(router -> index.js)加上下面这句话,注意位置: //router/ ...
Vue实现可折叠导航菜单~非常详细
通过Vue编写一个二级,并且是可以折叠的导航菜单文章目录思路在main.js中配置axios 导入element样式 Home.vue实现静态页面.样式及功能思路在侧边栏区域只写了一个二级 ...
【前端学习日记】ElementUi+导航菜单+面包屑+Tag标签联动
目录导航菜单的渲染路由跳转联动面包屑标签联动总结思路:导航菜单是负责路由跳转的,面包屑和Tags标签通过读取事件路由跳转的数据进行渲染,这里涉及到组件间通信,使用vuex状态管理器来管理这部 ...
ElementUI导航菜单嵌套多级折叠面板的小箭头图标bug
1.问题使用的饿了么组件,导航menu组件,里面放了几层折叠面板,结果在收起的时候,小箭头没有隐藏掉,找了半天样式没找到,于是,另辟蹊径(贴了个创可贴) 2.解决直接整了个div,绝对定位,设置宽 ...
vue+elementUI项目中使用NavMenu导航菜单
vue+elementUI项目中使用NavMenu 导航菜单在elementUI官网组件中NavMenu 导航菜单的使用只是简单地运用,在实践项目中还需要配合路由配置.一般后台管理系统不只是导航菜单 ...
elementui树状菜单tree_vue.js+element-ui做出菜单树形结构
这次给大家带来vue.js+element-ui做出菜单树形结构,vue.js+element-ui做出菜单树形结构的注意事项有哪些,下面就是实战案例,一起来看一下. 由于业务需要,要求实现树形菜单, ...
Vue结合element-ui实现导航菜单展开收缩小功能
1. 先上个效果图这里我把控制菜单收缩的放在中间了,是可以随便调整的. 2. 问题思路想法 ① 首先是布局,这就是个很经典的后台管理系统的容器页面,这里分为上下结构,上面一般放些系统logo. 登录 ...
vue项目中引入阿里 iconfont 图标动态渲染导航菜单图标
vue + element 后台项目,项目中都是用的 element-ui 的图标但是导航菜单是通过后台数据渲染的,所以在阿里图标库找了图标给后台,再渲染步骤一: 在图标库找到想要的图标,加入购物 ...

Vue之ElementUI导航菜单

Vue之ElementUI导航菜单相关推荐

最新文章

热门文章