<el-menu router :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>用户信息</span>
</template>
<el-menu-item-group>
<el-menu-item index="/user/account">账号信息</el-menu-item>
<el-menu-item index="/user/password">修改密码</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-location"></i>
<span>公司信息</span>
</template>
<el-menu-item-group>
<el-menu-item index="/company/userManager">用户管理</el-menu-item>
<el-menu-item index="/company/editUser">添加/编辑用户</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>

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属性值时则该item为当前项。

vue+element的el-menu组件实现路由跳转及当前项的设置的更多相关文章

  1. element---------------el-menu组件_实现路由跳转及当前项的设置

    <el-menu router :default-active="$route.path" class="el-menu-vertical-demo" @ ...

  2. (vue.js)Vue element tab 每个tab用一个路由来管理?

    (vue.js)Vue element tab 每个tab用一个路由来管理? 来源:网络整理     时间:2017/5/13 0:24:01     关键词:   关于网友提出的“ (vue.js) ...

  3. vue常用操作及学习笔记(路由跳转及路由传参篇)

    路由跳转 - 超链接方式跳转 html: <div id="app"> <h1>Hello App!</h1> <p> <!- ...

  4. Vue.js 第4章 组件与路由

    组件 什么是组件:组件就是一些标签结构的封装,同时为这些结构添加需要的业务逻辑,设置你想要的样式 一个组件中一般可以设置:结构,功能和样式 为什么要使用组件: 使用方便 复用 组件的创建和使用 组件的 ...

  5. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

  6. Taro-ui TabBar组件使用路由跳转

    1. 安装taro-ui (此处使用cnpm) cnpm install taro-ui 2. 全局引入样式 app.scss sass :@import "~taro-ui/dist/st ...

  7. 封装Vue Element的table表格组件

    上周分享了几篇关于React组件封装方面的博文,这周就来分享几篇关于Vue组件封装方面的博文,也好让大家能更好地了解React和Vue在组件封装方面的区别. 在封装Vue组件时,我依旧会交叉使用函数式 ...

  8. 封装Vue Element的dialog弹窗组件

    我本没有想着说要封装一个弹窗组件,但有同行的朋友在问我,而且弹窗组件也确实在项目开发中用的比较多.思前想后,又本着样式统一且修改起来方便的原则,还是再为大家分享一个我所封装的弹窗组件吧. 其实,并不是 ...

  9. 【vue】vue +element 搭建项目,组件之间通信

    父子组件通信 父 通过props属性给 子传递数据 子 操作 父  this.$parent.XXX 子通过$emit传递参数 或者通过vue-bus vue-bus既可以实现父子组件之间的通信,也可 ...

随机推荐

  1. cin,cout优化

    https://www.cnblogs.com/PrayG/p/5749832.html ios_base::sync_with_stdio(0);    cin.tie(0); 涨知识了

  2. 干货满满!解密阿里云RPA (机器人流程自动化)的产品架构和商业化发展

    阿里云RPA,作为阿里云自研8年的技术,在资本的热捧下,逐渐从幕后来到台前,成为企业服务市场的黑马.本文将从产品上全面剖析,阿里云RPA这款产品的现阶段情况,同时简单谈谈阿里云RPA的商业化进展. 阿 ...

  3. bzoj1051题解

    [题意分析] 给你一张有向图,求有多少个点,满足以其他任意一点为起点都能到达该点. [解题思路] 如果这张有向图不连通,则一定没有点能被其他所有点到达,答案为0. 然后先用tarjan缩一波强连通分量 ...

  4. HDU6331Problem M. Walking Plan

    传送门 分块floyd $f[i][j][k]$表示从i走k步到j的最短路 $g[i][j][k]$表示从i走k*100步到j的最短路 $h[i][j][k]$表示从i至少走k步到j的最短路 询问从x ...

  5. CSS3:教程

    ylbtech-CSS3:教程 1.返回顶部 1. CSS3 教程 CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. 本教程向您讲解 CSS3 中的新特性. 开始学习 CSS3! ...

  6. NetBeans简介和简单使用

    1.什么是NetBeans? NetBeans IDE:可以使开发人员利用Java平台能够快速创建Web.企业.桌面以及移动的应用程序: 支持语言:PHP.Ruby.JavaScript.Groovy ...

  7. SPI 通信

    Frm: http://www.wzaobao.com/p/l5079K.html http://blog.csdn.net/xqmoo8/article/details/8043474 http:/ ...

  8. Spring 源码学习——注册 BeanDefinition

    BeanFactory BeanFactory 是 Spring IoC 容器的具体实现,是 Spring 容器的核心接口. DefaultListableBeanFactory XmlBeanFac ...

  9. ps-使用通道抠图为XX换背景

    第一步先载入图片 点击通道,复制蓝色通道 然后点击新的蓝色通道,图像-调整-曲线-改变输入输出, 然后用历史画笔全部填黑.  然后载入选区,复制.在图层中新建蒙版 黏贴,反向(CTRL+I)就可以了. ...

  10. LOL遇到登录服务器问题,未能连接到网络原因

    通过打开各种浏览器,发现只有IE不能上网,QQ之类的都能上网,不能登入LOL 只有IE是出现:远程计算机或设备将不接受连接 这个问题 解决办法是: 1.win+r --> 输入regedit 打 ...