element---------------el-menu组件_实现路由跳转及当前项的设置
<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组件_实现路由跳转及当前项的设置的更多相关文章
- vue+element的el-menu组件实现路由跳转及当前项的设置
<el-menu router :default-active="$route.path" class="el-menu-vertical-demo" @ ...
- element UI 的学习一,路由跳转
1.项目开始: # 安装vue $ cnpm install vue@2.1.6 # 全局安装 vue-cli $ cnpm install --global vue-cli ...
- 提示框,对话框,路由跳转页面,跑马灯,幻灯片及list组件的应用
目录: 主页面的js业务逻辑层 主页面视图层 主页面css属性设置 跳转页面一的js业务逻辑层 跳转页面一的视图层 跳转页面二的视图层 跳转页面三的js业务逻辑层 跳转页面三的视图层 跳转页面三的cs ...
- Vue3 封装 Element Plus Menu 无限级菜单组件
本文分别使用 SFC(模板方式)和 tsx 方式对 Element Plus el-menu 组件进行二次封装,实现配置化的菜单,有了配置化的菜单,后续便可以根据路由动态渲染菜单. 1 数据结构定义 ...
- 关于elementUi tab组件路由跳转卡死问题
好久没来了,周五项目终于要上线了(*^▽^*),上线之前测出一个很恶心的bug真真是... 项目:Vue + elementUi 后台管理项目 问题描述:登录后首次通过侧边栏路由跳转到主页面有ta ...
- Taro-ui TabBar组件使用路由跳转
1. 安装taro-ui (此处使用cnpm) cnpm install taro-ui 2. 全局引入样式 app.scss sass :@import "~taro-ui/dist/st ...
- Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参
目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...
- Vue+elementUI 自定义动态数据菜单导航组件实现展开收缩+路由跳转router-view渲染数据 路由跳转到同一个页面带参数ID 自动刷新数据
准备:导入ElementUI 看官网教程 数据准备:JSON数据转换成树状 参考文章: JS实现 JSON扁平数据转换树状数据 后台我拿的数据是这样的格式: [ {id:1 , parentId: 0 ...
- vue如何在路由跳转的时候更新组件
项目中在路由跳转的时候碰到一个问题,没有更新视图,如何解决呢: https://segmentfault.com/a/1190000008879966 http://www.tuicool.com/a ...
随机推荐
- windows下捕获本地回环网络中的报文RawCap
一.下载地址: 官网地址:https://www.netresec.com/?page=RawCap 百度云:链接:https://pan.baidu.com/s/1mWCOTRF5XicuJitBA ...
- JAVA堆,栈的区别,用AarrayList、LinkedList自定义栈
大家都知道java模拟机在运行时要开辟空间所以它有特定的五个内存划分: 1.寄存器: 2.本地方法区: 3.方法区: 4.栈内存: 5.堆内存: 但是我们今天来注重讲一下栈和堆 ...
- string.Format 格式化
1.格式化货币(跟系统的环境有关,中文系统默认格式化人民币,英文系统格式化美元) string.Format("{0:C}",0.2) 结果为:¥0.20 (英文操作系统结果:$0 ...
- XPATH中text()和string()的使用区别
<table style="WIDTH: 95.45%; BORDER-COLLAPSE: collapse; EMPTY-CELLS: show; MARGIN-LEFT: 4.55 ...
- element-ui里的form校验,一直有点疑惑,prop是怎么对应的?
图一 图一中红框内的这种校验,必须在 这个product_form数据域内定义对应的变量名(cid.itemName......),不然对应不上. 图一红框外的那种校验,则不用在数据域内定义对应的变量 ...
- linux高频操作: host,用户管理,免密登陆,管道,文件权限,脚本,防火墙,查找
1. 修改hosts和hostname 2. 用户管理 3. 免秘登陆 4. 文件末尾添加 >> 5. 设置可执行文件 6. 任何地方调用 7. Centos6 永久关闭防火墙 8. Ce ...
- 前端编译原理 笔记 -- BISON
前面总结的差不多了,这边记录下,零碎的相关阅读可以备忘的一些知识点 Bsion文档,下面是中文的地址 https://blog.csdn.net/chinamming/article/details ...
- AE开发—利用IQueryFilter接口进行属性查询
在ArcGis Engine二次开发过程中,经常会需要用到查询统计的功能,而IQueryFilter是最常见的属性字段查询接口,可以用来做一些简单的查询工作. 现在有一些公交站点和公交路线的数据,可视 ...
- arm-none-eabi/bin/ld: build/com.zubax.gnss.elf section `.text' will not fit in region `flash'
出现如下错误: /arm-none-eabi/bin/ld: build/com.zubax.gnss.elf section `.text' will not fit in region `flas ...
- Powershell-加域脚本
$domain = "abc" $password = "mima" | ConvertTo-SecureString -asPlainText -Force ...