vue-router 根据路由动态添加目录 控制目录权限
<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 => {
});
}
//******************************************************************************************************
}
});
参考文章
