vue+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为当前项。
vue+element的el-menu组件实现路由跳转及当前项的设置的更多相关文章
- element---------------el-menu组件_实现路由跳转及当前项的设置
<el-menu router :default-active="$route.path" class="el-menu-vertical-demo" @ ...
- (vue.js)Vue element tab 每个tab用一个路由来管理?
(vue.js)Vue element tab 每个tab用一个路由来管理? 来源:网络整理 时间:2017/5/13 0:24:01 关键词: 关于网友提出的“ (vue.js) ...
- vue常用操作及学习笔记(路由跳转及路由传参篇)
路由跳转 - 超链接方式跳转 html: <div id="app"> <h1>Hello App!</h1> <p> <!- ...
- Vue.js 第4章 组件与路由
组件 什么是组件:组件就是一些标签结构的封装,同时为这些结构添加需要的业务逻辑,设置你想要的样式 一个组件中一般可以设置:结构,功能和样式 为什么要使用组件: 使用方便 复用 组件的创建和使用 组件的 ...
- vue+element ui中select组件选择失效问题原因与解决方法
codejing 2020-07-10 09:13:31 652 收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...
- Taro-ui TabBar组件使用路由跳转
1. 安装taro-ui (此处使用cnpm) cnpm install taro-ui 2. 全局引入样式 app.scss sass :@import "~taro-ui/dist/st ...
- 封装Vue Element的table表格组件
上周分享了几篇关于React组件封装方面的博文,这周就来分享几篇关于Vue组件封装方面的博文,也好让大家能更好地了解React和Vue在组件封装方面的区别. 在封装Vue组件时,我依旧会交叉使用函数式 ...
- 封装Vue Element的dialog弹窗组件
我本没有想着说要封装一个弹窗组件,但有同行的朋友在问我,而且弹窗组件也确实在项目开发中用的比较多.思前想后,又本着样式统一且修改起来方便的原则,还是再为大家分享一个我所封装的弹窗组件吧. 其实,并不是 ...
- 【vue】vue +element 搭建项目,组件之间通信
父子组件通信 父 通过props属性给 子传递数据 子 操作 父 this.$parent.XXX 子通过$emit传递参数 或者通过vue-bus vue-bus既可以实现父子组件之间的通信,也可 ...
随机推荐
- java中的访问修饰符详解
主要讲述一下java中protected的修饰控制范围. 在叙述protected修饰符使用之前,先来说一下java,可以发现,开发java程序是一个时时刻刻都在编写类.开发类.定义类的过程.类里面可 ...
- wpf tabcontrol内的datagrid的selectionChanged事件向往传递问题
tabcontrol 内的一个tabitem里是datagrid 当程序相应datagrid的selectionchanged事件后会向上传递到tabcontrol的selectionchanged事 ...
- git Web
{ …or create a new repository on the command line echo "# Kotlin" >> README.md git ...
- TopCoder[SRM587 DIV 1]:TriangleXor(550)
Problem Statement You are given an int W. There is a rectangle in the XY-plane with corners at ...
- NX二次开发-UFUN拉伸函数UF_MODL_create_extruded2
NX9+VS2012 //NX二次开发中常用拉伸函数为UF_MODL_create_extruded2,但是此函数不能拉伸片体, //想要拉伸片体用函数UF_MODL_create_extruded. ...
- Shader实现新手指引挖空圆形和矩形
这个是参考这个做的:https://blog.csdn.net/tracyzly/article/details/80279692 Shader "UI/ImageWithHole" ...
- 水一帖:快速计算ceil(a/b)的方式
今天拍脑袋想出来的,不用ceil函数,不用浮点运算,不用取模,兼顾运行常数和代码量的向上取整除方法 在保证a,b>0时 ceil(a/b)=(a-1)/b+1; (完)
- 李宏毅机器学习课程---3、Where does the error come from
李宏毅机器学习课程---3.Where does the error come from 一.总结 一句话总结:机器学习的模型中error的来源是什么 bias:比如打靶,你的瞄准点离准心的偏移 va ...
- 去掉Word 标题编号变成黑框
问题: 在使用Word编写文档时,提前拟好的标题编号会突然变成黑框(黑色的方框,黑色的矩形),如下图 解决方案: 1.将光标定位到标题中,紧邻黑框的右侧 2.按键盘左方向键使方框变成黑色 3.按键盘的 ...
- Harbor任意管理员注册漏洞复现CVE-2019-16097
注册时抓包 添加poc "has_admin_role":true 管理员权限 POC POST /api/users HTTP/1.1 Host: 127.0.0.1 Conte ...