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 => {
        });
    }
    //******************************************************************************************************
  }
});

　　

参考文章

https://segmentfault.com/a/1190000009392552