vue-privilege-menu v1.1.7

vue-privilege-menu

Automatically generate routes and menu by given privilege

根据用户所给权限自动配置vue-router（hash模式）并展示菜单

Usage

安装

npm i vue-privilege-menu

引入

import Vue from 'vue'
import VueRouter from 'vue-router'
import privilegeMenu from 'vue-privilege-menu'

Vue.use(VueRouter)
Vue.use(privilegeMenu)

示例

<template>
  <div id="app">
      <privilege-menu
          :routerMap="routerMap"
          :role="role"
          router
          @select="handleSelect"
          @open="handleOpen"
          @close="handleClose"/>
      <router-view/>
  </div>
</template>

<script>
// routerMap详细信息在下面
import { routerMap } from './router'
export default {
  name: 'app',
  data () {
    return {
        role: '',
        routerMap,
    }
  },
  created() {
      this.getRole()
  },
  methods: {
      async getRole(){
          let res = await ajax('xxx/xxx')
          if(res.success){
            this.role = res.data
          }
      }
      handleSelect(key, keyPath) {
          console.log('============select==========')
          console.log(key, keyPath)
      },
      handleOpen(key, keyPath) {
          console.log('============open==========')
          console.log(key, keyPath)
      },
      handleClose(key, keyPath) {
          console.log('============close==========')
          console.log(key, keyPath)
      },
  },
}
</script>

PrivilegeMenu Attribute

PrivilegeMenu Events

RouterMap Example

[
    {
        path: '/requestquery',                          //第一层级路径
        display: '请求查询',                             //名称
        icon: 'el-icon-s-management',                   //图标（当前节点为最外层menu时渲染）
        children: [
            {
                path: '/logidsearch',                   //第二层级路径，此页面路径为/requestquery/logidsearch
                display: 'Logid查询',
                component: a,                           //页面组件
            },
            {
                path: '/conditionsearch',
                display: '条件查询',
                component: b,
                privilege: ['user_admin', 'user_re'],   //拥有查看该页面权限的角色，由role参数传入，有权限的角色可看到并访问此menu项（只在叶节点起作用）
            },
            {
                path: '/c',
                display: 'c',
                component: c,
                notShow: true,                          //有权限角色可以访问该页面，但menu中不展示
                privilege: ['user_admin', 'user_re'],
            }
        ],
    },
    {
        path: '/dataSearch',
        display: '数据查询',
        icon: 'el-icon-document',
        children: [
            {
                path: '/narwalSearch',
                display: 'Narwal查询',
                component: c,
                icon: 'el-icon-document',
                privilege: ['user_admin', 'user_re'],
            },
        ],
    },
    {
        path: '/utils',
        display: '通用工具',
        icon: 'el-icon-s-tools',
        children: [
            {
                path: '/jsonformatter',
                display: 'JSON格式化',
                component: a,
                privilege: ['user_admin', 'user_re'],
            },
            {
                path: '/transform',
                display: 'Pin/PinId查询',
                component: b,
                privilege: ['user_admin', 'user_re'],
            },
            {
                path: '/jsonquery',
                display: '数据请求',
                component: c,
                icon: 'el-icon-s-tools',
                privilege: ['user_admin', 'user_re', 'user_pm'],
            },
        ],
    }
]

Build Setup

# install dependencies
npm install

# 运行example引入本地文件方便修改调试
npm run dev

# build for production with minification
npm run build