vue Element动态设置el-menu导航当前选中项
1,npm install vuex --save
2,在src下新建vuex文件夹,新建store.js文件;
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) const state = {
count: 0,
adminleftnavnum:"/" //管理后台左侧导航
}
const mutations = {
increment (state) {
state.count++
}
}
// const actions = {...}
//注册Store
export default new Vuex.Store({
state,
mutations
});
3,在main.js下,创建和挂载根实例
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
4,在components--common--side_nav.vue下(导航所在的组件)
<el-menu :default-active="navselected" :active="navselected" @select="selectItems" class="el-menu-admin" router>
添加变量和改变方法
export default {
components:{
'el-menu':Menu,
'el-submenu':Submenu,
'el-menu-item':MenuItem,
'el-menu-item-group':MenuItemGroup
},
data () {
return {
navselected:"/",
openends:['1','2','3','4','5','6']//默认menu展开
}
},
mounted(){
console.log(this.navselected)
},
methods:{
getNavType(){
this.navselected=this.$store.state.adminleftnavnum;
//store.state.adminleftnavnum里值变化的时候,设置navselected
},
selectItems(index){
console.log(index)
this.$store.state.adminleftnavnum=index;
//按钮选中之后设置当前的index为store里的值。
}
},
watch: {
// 监测store.state
'$store.state.adminleftnavnum': 'getNavType'
}
}
5,在其他组件改变(src--components--page--home--home.vue)
this.$store.state.adminleftnavnum的值即可
export default {
created () {
this.$store.state.adminleftnavnum="2-2"; //设置左侧导航2-2 active
}
}
预览地址:https://besswang.github.io/element-admin/dist/index.html#/
参考地址:http://yaohuitao.com/?p=341
vue Element动态设置el-menu导航当前选中项的更多相关文章
- Vue.之. 动态设置按钮Disabled
Vue.之. 动态设置按钮Disabled 按钮代码如下: 添加了一个 属性 :disabled="isAble" ,控制:更新按钮.重置按钮 <el-form- ...
- vue + element 动态渲染、移除表单并添加验证
博客地址:https://ainyi.com/66 又接到新需求了吧~~ 背景 在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加.移除表单,更加个性化的效果. 常见于填写个人信息.附加内 ...
- vue+element 动态表单验证
公司最近的项目有个添加动态表单的需求,总结一下我在表单验证上遇到的一些坑. 如图是功能的需求,这个功能挺好实现的,但是表单验证真是耗费了我一些功夫. vue+element在表单验证上有一些限制,必须 ...
- Vue系列——动态设置img标签的src属性
声明 本文转自:vue动态设置img的src路径 正文 相信开发的小伙伴已经遇到这个问题了,动态切换img标签的src时,写的路径就是不生效,原因是vue并没有把你的路径字符串当做路径来处理,而是直接 ...
- vue中动态设置echarts画布大小
document.getElementById('news-shopPagechart').style.height = this.heightpx2+'px'; //heightpx2定义在data ...
- 【zTree】zTree根据后台数据生成树并动态设置前面的节点复选框的选中状态
0.页面中准备树的ul <ul id="treeDemo10" class="ztree" style="display: none;" ...
- 使用val()方法设置表单中的默认选中项
有时候我们展示给用户的表单中的checkbox,radio,selec等标签的一些项是默认选中的.比方:当用户改动文章的时候,假设相应的栏目为下拉框的话,那么它的默认选中值应该是原来的栏目位置. 能够 ...
- vue+ element 动态换肤
转至 https://www.cnblogs.com/dengqichang/p/10364455.html 一.搭建好项目的环境. 二.根据ElementUI官网的自定义主题(http://elem ...
- vue keepalive 动态设置缓存
场景:A首页.B列表页.C详情页B---->C 缓存‘列表1’详情的数据A---->C 读取‘列表1’详情的数据B---->C (希望清除‘列表1’的缓存,变成缓存‘列表2’详情的数 ...
随机推荐
- u3d Mecanim动画
作为Unity4.0的主要更新功能,Mecanim动画被寄予了很多的期望.系统有先进的地方,也有不足的地方.这些我们留到最后再来总结. 阿赵粗略的学习了一下,写下以下的教程.这篇教程简单的说明了Mec ...
- 特殊权限set_uid /特殊权限set_gid/特殊权限stick_bit/软链接文件/硬连接文件
2.18 特殊权限set_uid 2.19 特殊权限set_gid 2.20 特殊权限stick_bit 2.21 软链接文件 2.22 硬连接文件 特殊权限set_uid(s权限用户user权限) ...
- 【VirtualBox】ubuntu虚拟机与windows设置共享文件夹
第一步:配置 http://blog.csdn.net/a962804835/article/details/72820355 第二步:解决ubuntu下共享文件夹无访问权限的问题 http://bl ...
- 【python】并行化的又一种思路
https://segmentfault.com/a/1190000000414339
- Android Material Design控件学习(二)——NavigationView的学习和使用
前言 上次我们学习了TabLayout的用法,今天我们继续学习MaterialDesign(简称MD)控件--NavigationView. 正如其名,NavigationView,导航View.一般 ...
- 详解BarTender选项大小调整模式
BarTender大小调整模式是DotCode码制独有的符号体系特殊选项.DotCode 符号可能在形状上有所不同,包括从接近正方形的点阵到细长的色带,而“大小调整模式”选项通过指定点阵的配置来确定 ...
- 总结的比较好的OpenGL教程
OpenGL Programming Guide(红宝书) http://www.glprogramming.com/red/ OpenGL Reference Manual(蓝宝书) http:// ...
- 如何破解银行O2O模式创新
文/赵志宏 摩 根大通的买房APP,使客户可根据自己的位置选择合适的贷款经理:华道数据提供的卡惠APP,使客户可随时查询自己周围信用卡刷卡打折的商户信息:民生银 行的微信预约叫号功能,使客户根据可自己 ...
- 利用OpenSSL库对Socket传输进行安全加密(RSA+AES)
轉自:http://blog.chinaunix.net/uid-9543173-id-3921143.html 利用OpenSSL库对Socket传输进行安全加密(RSA+AES) 1. 利用RSA ...
- Spring4 Quartz2 动态任务,Spring4整合quartz2.2.3简单动态任务
Spring4 Quartz2 动态任务 Spring4整合quartz2.2.3简单动态任务, Quartz2.2.3简单动态定时任务二, SimpleScheduleBuilder简单定时任务 ...