上代码。

xxx.vue

<template>
<div id="xxx">
<div class="layout">
<Layout>
<Sider breakpoint="md" collapsible :collapsed-width="78" :width="106">
<Menu :active-name="getActiceName" theme="dark" width="auto" :style="{padding:'10px 0 0'}">
<MenuItem name="1-1" @click.native="jump(1)">
<span>来源字典</span>
</MenuItem>
<MenuItem name="1-2" @click.native="jump(2)">
<span>权限字典</span>
</MenuItem>
</Menu>
<div slot="trigger"></div>
</Sider>
<Layout>
<Content :style="{margin: '0', background: '#212121', minHeight: content_height}">
<router-view></router-view>
</Content>
</Layout>
</Layout>
</div>
</div>
</template> <script>
export default {
name: "xxx",
data() {
return {
// activeNameString:'1-1',
routerIndex:1,
header_height:70,
content_height:220 + 'px'
}
},
methods:{
jump(index){
if (index === 1) {
this.$router.push('/backHome/dictionary/source')
} else if (index === 2) {
this.$router.push('/backHome/dictionary/authority')
} else if (index === 3) {
this.$router.push('/backHome/dictionary/account')
}
}
},
computed:{
getActiceName(){
return this.$store.state.activeNameString
}
},
components: { },
created() {
console.log(this.$store.state.activeNameString)
},
mounted(){
this.content_height = window.innerHeight - this.header_height + 'px'
}
};
</script>

store.js

export const store = {
state:{
test:"hello",
activeNameString:"1-1"
},
getters:{
},
mutations:{
changeActiveNameFunc(state, obj){
state.activeNameString = obj.activeNameString
}
},
actions:{
changeActiveNameFunc(context, obj){
context.commit('changeActiveNameFunc', obj)
}
}
}

main.js

...
import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
// iview
import iView from 'iview';
Vue.use(iView);
// vuex
Vue.use(Vuex)
import {router} from './router.js'
import {store} from './store.js' const s = new Vuex.Store(store)
...
const v = new Vue({
el: '#app',
router,
store:s,
components: { App },
template: '<App/>'
})

以上。

vuex : 用vuex控制侧栏点亮状态的更多相关文章

  1. 多种css3时尚侧栏菜单展开显示效果Off-Canvas Menu Effects

    今天我们想分享多种css3时尚侧栏菜单展开显示效果.侧边栏应用广泛,我们之前已经产生了一些效果灵感.风格演变,今天我们要展示一套新的灵感的现代效果.不同的布局和菜单的同步转换和页面可以让一切看起来更有 ...

  2. Ionic Js十七:侧栏菜单

    一个容器元素包含侧边菜单和主要内容.通过把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换. 效果图如下所示:   用法 要使用侧栏菜单,添加一个父元素,一个中间内容 ,和一个或更 ...

  3. ionic js 侧栏菜单 把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换

    ionic 侧栏菜单 一个容器元素包含侧边菜单和主要内容.通过把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换. 效果图如下所示: 用法 要使用侧栏菜单,添加一个父元素<ion ...

  4. 使用django开发博客过程记录3——博客侧栏实现

    说起这个侧栏真是苦恼我很长时间,一开始以为和之前的一样传递额外参数就可以了就像下面这样: class IndexView(ListView): template_name = 'apps/index. ...

  5. PIC12F629帮我用C语言写个程序,控制三个LED亮灭

    http://power.baidu.com/question/240873584599025684.html?entry=browse_difficult PIC12F629帮我用C语言写个程序,控 ...

  6. 仿酒仙网的一款jQuery侧栏弹出导航栏特效

    仿酒仙网的一款jQuery侧栏弹出导航栏特效 一款常用于商城左侧商品导航的jquery菜单导航特效. 非常不错的一款商品分类特效.大家可以拿去研究研究 . 注意:该特效还支持挨千刀的IE6啊,之强大. ...

  7. 原生javascript写的侧栏跟随效果

    浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...

  8. 玩转Firefox侧栏

    偶然看到煎蛋网的"玩转firefox侧栏",才注意到它. Firefox侧栏有啥不一样? Firefox可以在侧栏中打开网页. 于是,一系列玩法就出来了... 侧栏打开在线应用 G ...

  9. Centos7下建立rubymine快捷方式到侧栏或桌面

    gnome桌面的所有菜单项都存储如下位置: /usr/share/applications/ 新建一个菜单项,直接在该目录下新建一个后缀名为.desktop的文件即可. $ vi /usr/share ...

随机推荐

  1. C++ 公有继承、保护继承和私有继承的对比

    在c++的继承控制中,有三种不同的控制权限,分别是public.protected和private.定义派生类时,若不显示加上这三个关键字,就会使用默认的方式,用struct定义的类是默认public ...

  2. Domain Adaptive Faster R-CNN:经典域自适应目标检测算法,解决现实中痛点,代码开源 | CVPR2018

    论文从理论的角度出发,对目标检测的域自适应问题进行了深入的研究,基于H-divergence的对抗训练提出了DA Faster R-CNN,从图片级和实例级两种角度进行域对齐,并且加入一致性正则化来学 ...

  3. Java并发编程-深入探讨synchronized实现原理

    synchronized这个关键字对应Java程序猿来说是非常的熟悉,只要遇到要解决线程安全问题的地方都会使用这个关键字.接下来一起来探讨一下synchronized到底时怎么实现线程同步,使用syn ...

  4. unknown directive "" in E:\canteen\nginx-1.16.0/conf/nginx.conf:3-------文本编辑器修改nginx配置文件的坑

    nignx小白一个,今天在配置nginx的时候,理所当然的用了文本编辑器编辑并保存了一下nginx的nginx.conf配置文件,一不小心就折腾了几个钟. 保存之后就nginx -s reload一下 ...

  5. SpringCloud与Eureka,Feign,Ribbon,Hystrix,Zuul核心组件间的关系

    Eureka:各个服务启动时,Eureka Client都会将服务注册到Eureka Server,并且Eureka Client还可以反过来从Eureka Server拉取注册表,从而知道其他服务在 ...

  6. Scala创建SparkStreaming获取Kafka数据代码过程

    正文 首先打开spark官网,找一个自己用版本我选的是1.6.3的,然后进入SparkStreaming   ,通过搜索这个位置找到Kafka, 点击过去会找到一段Scala的代码 import or ...

  7. swift对象存储安装

    对象存储服务概览 OpenStack对象存储是一个多租户的对象存储系统,它支持大规模扩展,可以以低成本来管理大型的非结构化数据,通过RESTful HTTP 应用程序接口. 它包含下列组件: 代理服务 ...

  8. Python实用笔记——错误处理

    让我们用一个例子来看看try的机制: try: print('try...') r = 10 / 0 print('result:', r) except ZeroDivisionError as e ...

  9. 基于opencv的车牌提取项目

    初学图像处理,做了一个车牌提取项目,本博客仅仅是为了记录一下学习过程,该项目只具备初级功能,还有待改善 第一部分:车牌倾斜矫正 # 导入所需模块 import cv2 import math from ...

  10. vue全家桶(2.1)

    3.路由切换 3.1.vue-router路由切换 3.1.1.什么是前端路由 路由这个概念最先是后端出现的,发送不同的请求,后端根据请求的不同返回不同的资源,这个时候的url是和后端交互的,需要在后 ...