<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为当前项。

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

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

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

  2. element UI 的学习一,路由跳转

    1.项目开始: # 安装vue    $ cnpm install vue@2.1.6    # 全局安装 vue-cli    $ cnpm install --global vue-cli    ...

  3. 提示框,对话框,路由跳转页面,跑马灯,幻灯片及list组件的应用

    目录: 主页面的js业务逻辑层 主页面视图层 主页面css属性设置 跳转页面一的js业务逻辑层 跳转页面一的视图层 跳转页面二的视图层 跳转页面三的js业务逻辑层 跳转页面三的视图层 跳转页面三的cs ...

  4. Vue3 封装 Element Plus Menu 无限级菜单组件

    本文分别使用 SFC(模板方式)和 tsx 方式对 Element Plus el-menu 组件进行二次封装,实现配置化的菜单,有了配置化的菜单,后续便可以根据路由动态渲染菜单. 1 数据结构定义 ...

  5. 关于elementUi tab组件路由跳转卡死问题

    好久没来了,周五项目终于要上线了(*^▽^*),上线之前测出一个很恶心的bug真真是... 项目:Vue + elementUi   后台管理项目 问题描述:登录后首次通过侧边栏路由跳转到主页面有ta ...

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

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

  7. Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参

    目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...

  8. Vue+elementUI 自定义动态数据菜单导航组件实现展开收缩+路由跳转router-view渲染数据 路由跳转到同一个页面带参数ID 自动刷新数据

    准备:导入ElementUI 看官网教程 数据准备:JSON数据转换成树状 参考文章: JS实现 JSON扁平数据转换树状数据 后台我拿的数据是这样的格式: [ {id:1 , parentId: 0 ...

  9. vue如何在路由跳转的时候更新组件

    项目中在路由跳转的时候碰到一个问题,没有更新视图,如何解决呢: https://segmentfault.com/a/1190000008879966 http://www.tuicool.com/a ...

随机推荐

  1. Spring Cloud Alibaba学习笔记(5) - 整合Sentinel及Sentinel规则

    整合Sentinel 应用整合Sentinel 在dependencies中添加依赖,即可整合Sentinel <dependency> <groupId>com.alibab ...

  2. hdu 2643 rank 第二类斯特林数

    题意:给定n个人,要求这n个人的所有可能排名情况,可以多个人并列(这个是关键). 题解:由于存在并列的问题,那么对于n个人,我们最多有n个排名,枚举一下1~n,累加一下就好.(注意这里是变种的斯特林数 ...

  3. C#委托,匿名方法,Lambda,泛型委托,表达式树代码示例

    第一分钟:委托 有些教材,博客说到委托都会提到事件,虽然事件是委托的一个实例,但是为了理解起来更简单,今天只谈委托不谈事件.先上一段代码: 下边的代码,完成了一个委托应用的演示.一个委托分三个步骤: ...

  4. 用 Scoop 管理你的 Windows 软件

    包管理系统,Homebrew 就是 macOS 上体验最佳的软件包管理,能帮助我们方便快捷.干净利落的管理软件.在Windows平台上也有一个非常棒的包管理软件--Scoop.Scoop 最适合安装那 ...

  5. python——操作系统的发展史

    一.手工操作 —— 穿孔卡片 1946年第一台计算机诞生--20世纪50年代中期,计算机工作还在采用手工操作方式.此时还没有操作系统的概念.    程序员将对应于程序和数据的已穿孔的纸带(或卡片)装入 ...

  6. iOS NSNotificationCenter 使用姿势详解

    最近在做平板的过程中,发现了一些很不规范的代码.偶然修复支付bug的时候,看到其他项目代码,使用通知的地方没有移除,我以为我这个模块的支付闪退是因为他通知没有移除的缘故.而在debug和看了具体的代码 ...

  7. sql server存储过程解密

    解密存储过程: USE [RYTreasureDB] GO /****** Object: StoredProcedure [dbo].[sp__windbi$decrypt] Script Date ...

  8. Android studio如何连接三星手机

    打开Android studio,选择Trouble Shoot device connections: 这个菜单项会自动扫描本地已经用USB线连接的设备: 已经成功扫描出了我的Galaxy C7 P ...

  9. AttributeError: 'NoneType' object has no attribute 'extend'

    Python使用中可能遇到的小问题 AttributeError: 'NoneType' object has no attribute 'extend' 或者AttributeError: 'Non ...

  10. MyBatis3_[tp_38~]_动态sql_if_判断&OGNL_where标签_

    笔记要点出错分析与总结 /** 笔记: * 查询的时候,如果某些条件,没带可能SQL拼装会有问题; * 1.-->给where 后面加上 1=1, 以后的条件都and XXX * 2. < ...