<template>
<el-row class="el-menu" >
<el-menu
router
:default-active='$route.path'
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b" >
<el-menu-item index="/" class="main-logo">
<img src="../../static/img/sfa_logo.png" >
</el-menu-item>
<template v-for="(item , index) in $router.options.routes" v-if="item.meta.menuShow" >
<template v-if="index==1" >
<el-menu-item :index="item.path" :disabled='ListenChange' >
<i :class="item.meta.ClassName"></i>
<span slot="title" >{{item.meta.menuName}}</span>
</el-menu-item>
</template>
<template v-else="index!=1">
<el-menu-item :index="item.path" >
<i :class="item.meta.ClassName"></i>
<span slot="title" >{{item.meta.menuName}}</span>
</el-menu-item>
</template>
</template>
</el-menu>
</el-row>
</template> <script>
export default {
name: 'MenuItemGroup',
computed: {
// //计算属性动态获取值
// //*************************************************************
ListenChange() {
return this.$store.getters.ShowUserDisabled
},
// //*************************************************************
},
watch:{
//监测属性动态检测值
//*************************************************************
'ListenChange':{
handler:function (val, oldVal) {
},
deep:true,
},
//*************************************************************
}, methods: { handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
},
data() {
return {
}
},
components: {},
}
</script> <style scoped>
.el-menu{
-webkit-transition: width 0.28s;
transition: width 0.28s;
width: 180px !important;
height: 100%;
position: fixed;
font-size: 0px;
top: 0;
bottom: 0;
left: 0;
z-index: 1001;
overflow: hidden;
}
.main-logo > img{
width: 163px;
height: 47px;
padding: 0 20px;
margin-left: -30px;
} </style>

  

import Vue from 'vue'
import Router from 'vue-router'
import LineSwitch from '@/views/Switch/LineSwitch'
import Log from '@/views/Log/Log'
import ManualSwitching from '@/views/ManualSwitching/ManualSwitching'
import OperatorManagement from '@/views/OperatorManagement/OperatorManagement'
import CoreSwitchManagement from '@/views/CoreSwitchManagement/CoreSwitchManagement'
import UserManagementofNetworkEquipment from '@/views/UserManagementofNetworkEquipment/UserManagementofNetworkEquipment'
import AboutUS from '@/views/AboutUS/AboutUS' Vue.use(Router) export default new Router({
routes: [
{
path: '/',
name: 'LS',
component: LineSwitch,
meta: {
menuShow: true, // 是否在导航栏中显示
menuName: '线路切换', // 导航栏中显示的名称
ClassName:'el-icon-extendedicon-' //导航栏中显示的图标
},
},
{
path:'/ManualSwitching',
name:'ManualSwitching',
component:ManualSwitching,
meta: {
menuShow: true, // 是否在导航栏中显示
menuName: '手动切换', // 导航栏中显示的名称
ClassName:'el-icon-extendedbackup-hm' //导航栏中显示的图标 },
},{
path:'/OperatorManagement',
name:'OperatorManagement',
component:OperatorManagement,
meta: {
menuShow: true, // 是否在导航栏中显示
menuName: '运营商管理', // 导航栏中显示的名称
ClassName:'el-icon-extendedjizhanxinhao' //导航栏中显示的图标 },
},{
path:'/UserManagementofNetworkEquipment',
name:'UserManagementofNetworkEquipment',
component:UserManagementofNetworkEquipment,
meta: {
menuShow: true, // 是否在导航栏中显示
menuName: '网络设备用户管理', // 导航栏中显示的名称
ClassName:'el-icon-extendedquanxianguanli' //导航栏中显示的图标
},
},{
path:'/CoreSwitchManagement',
name:'CoreSwitchManagement',
component:CoreSwitchManagement,
meta: {
menuShow: true, // 是否在导航栏中显示
menuName: '核心交换机管理', // 导航栏中显示的名称
ClassName:'el-icon-extendedhexinjiaohuanji' //导航栏中显示的图标
},
},{
path:'/SwitchLogfile',
name:'Log',
component:Log,
meta: {
menuShow: true, // 是否在导航栏中显示
menuName: '切换日志', // 导航栏中显示的名称
ClassName:'el-icon-extendedrizhi' //导航栏中显示的图标
},
},{
path:'/AboutUS',
name:'AboutUS',
component:AboutUS,
meta: {
menuShow: true, // 是否在导航栏中显示
menuName: '关于我们', // 导航栏中显示的名称
ClassName:'el-icon-extendedicon-test' //导航栏中显示的图标
},
}
]
})

  

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state={//要设置的全局访问的state对象
UserInfo:{
user_name:'',
user_account:'000',
disabled:''
},
//要设置的初始属性值
};
const getters = {
ShowUserName(state){
return state.UserInfo.user_name
},
ShowUserAccount(state){
return state.UserInfo.user_account
},
ShowUserDisabled(state){
return state.UserInfo.disabled
},
};
const mutations = {
SetUserAccount(state,user_account){
state.UserInfo.user_account=user_account;
},
SetUserName(state,user_name) {
state.UserInfo.user_name = user_name;
},
SetUserDisabledFalse(state) {
state.UserInfo.disabled = false;
},
SetUserDisabledTrue(state) {
state.UserInfo.disabled = true;
} };
const store = new Vuex.Store({
state,
getters,
mutations
});
export default store;

  

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '../static/icons/iconfont.css'
//*********************************************************************************
// // axios 设置
import axiosAPI from '@/api/axios.js'
Vue.use(axiosAPI)
//********************************************************************************* Vue.use(ElementUI);
Vue.config.productionTip = false;
/* eslint-disable no-new */
import store from './store/index.js'
new Vue({
el: '#app',
store,
router,
components: {App},
template: '<App/>',
created() {
this.GetUserInfo()
},
methods: {
//获取用户信息 判断是否有手动切换的权限
//******************************************************************************************************
GetUserInfo() {
this.getuserinfo({})
.then(response => {
let bk_username=response.data.bk_username;
if ( bk_username && ( bk_username == '01379233' || bk_username=='01377338' ||bk_username== '338440')){
this.$store.commit('SetUserDisabledFalse');
}else{
this.$store.commit('SetUserDisabledTrue');
}
this.$store.commit('SetUserName', response.data.chname);
this.$store.commit('SetUserAccount', response.data.bk_username);
// console.log(this.$store.getters.ShowUserAccount) })
.catch(error => {
});
}
//******************************************************************************************************
}
});

  

参考文章

https://segmentfault.com/a/1190000009392552

vue-router 根据路由动态添加目录 控制目录权限的更多相关文章

  1. Vue 中的Vue Router一级路由,二级路由,三级路由以及跳转

    今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...

  2. vue中v-bind:class动态添加class

    1.html代码 <template v-for='item in names'> <div id="app" class="selectItem&qu ...

  3. Vue router 一个路由对应多个视图

    使用命名路由 https://jsfiddle.net/posva/6du90epg/ <script src="https://unpkg.com/vue/dist/vue.js&q ...

  4. vue向数组中动态添加数据

    vue中数据更新通过v-model实现,向数组中添加数据通过push()实现,向shortcuts数组中动态添加newShortcut对象中的title和action this.shortcuts.p ...

  5. vue router引入路由与路由配置容易犯错的地方与常见的报错与处理报错

    首先npm安装vue-router插件,就不说了其次: 先看下我本地的目录结构吧 第一步:在src目录下新建一个专门存放router的index.js文件里面的内容为: import Vue from ...

  6. Vue router 全局路由守卫

    记录一下全局路由守卫的使用: 方法一:定义一个数组用于检测与管理需要登录的页面,全局路由守卫配合本地存储判断是否跳转 import Vue from 'vue' import Router from ...

  7. vue.js实现点击后动态添加class及删除同级class

    最近使用vue需要实现一个点餐选择商品规格的页面,需要通过vue动态的给被点击的元素添加class名字,使其变色,其他的删除class.如图: 开始在网上找了许多办法发现不是太好用,最后找到一个发现还 ...

  8. vue简单案例_动态添加删除用户数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Vue中通过v-for动态添加图片地址

    由于组件化问题,webpake在打包以后,src目录下的assets里面存放的img图片,路径已经更换.很多入坑的前端程序员在使用的时候,可能专破头也弄不清地址是什么个情况: 这里在使用vue-cli ...

随机推荐

  1. Ubuntu下如何用命令运行deb安装包

    转载自 WindTaiL的博客 如果ubuntu要安装新软件,已有deb安装包(例如:iptux.deb),但是无法登录到桌面环境.那该怎么安装?答案是:使用dpkg命令. dpkg命令常用格式如下: ...

  2. 2017 JUST Programming Contest 3.0 B. Linear Algebra Test

    B. Linear Algebra Test time limit per test 3.0 s memory limit per test 256 MB input standard input o ...

  3. 找规律 UVALive 6506 Padovan Sequence

    题目传送门 /* 找规律:看看前10项就能看出规律,打个表就行了.被lld坑了一次:( */ #include <cstdio> #include <algorithm> #i ...

  4. JDK6中System.getProperties返回键值说明

    JDK6中java.lang.System.getProperties()方法返回键值说明. 键 相关值的描述 java.version Java 运行时环境版本 java.vendor Java 运 ...

  5. MyEclipse配置Tomcat

    1.在Window->Perferences->MyEclipse->Servers->Tomcat->Tomcat 7.x中启用Tomcat并配置Tomcat路径和JD ...

  6. Python 相关疑问

    1. 如果我的脚本error handling 做的好,在ctrl+c退出的时候是不是不应该有任何traceback log? 2. repr() str() eval() 之间的区别? 3. 参数传 ...

  7. Plugging an Unplugged Pluggable Database issue 3

    Multitenant Unplug/Plug Best Practices (文档 ID 1935365.1) 1.source 从0419 升级到1019 ,但是datapatch 没有回退041 ...

  8. 419 Battleships in a Board 甲板上的战舰

    给定一个二维的甲板, 请计算其中有多少艘战舰. 战舰用 'X'表示,空位用 '.'表示. 你需要遵守以下规则:    给你一个有效的甲板,仅由战舰或者空位组成.    战舰只能水平或者垂直放置.换句话 ...

  9. .Net应用自定义鼠标样式

    (调用系统API的方法) 1.引用命名空间 using System.Runtime.InteropServices; 命名空间提供各种各样支持 COM 互操作 及平台调用服务的成员.using Sy ...

  10. 微服务熔断限流Hystrix之Dashboard

    简介 Hystrix Dashboard是一款针对Hystrix进行实时监控的工具,通过Hystrix Dashboard可以直观地看到各Hystrix Command的请求响应时间,请求成功率等数据 ...