vue-element-admin搭建项目中实现点击左侧菜单栏获取当前菜单的ID


1.vue-element-admin搭建项目中实现点击左侧菜单栏获取当前菜单的ID,我目前主要是用来做按钮权限功能;点击菜单获取当前菜单的按钮权限;
具体实现方法:
1.在src/layout/components/Sidebar/index.vue增加  watch: 方法来检测路由变化获取当前信息;

 

2.打印console.log('route watch ====>', val)看是否有自己需要的信息 (目前我需要ID信息,打印出来没有菜单的ID)因此store/modules/permission.js中generaMenu中将需要的ID传入meta中,那么打印console.log('route watch ====>', val)就可以获取到ID

 

在src/layout/components/Sidebar/index.vue在watch中调用后端提供的根据菜单ID获取的当前菜单的按钮信息

  

4.在项目utils/index中写公共方法看按钮是否有权限

6.在页面引用即可

import { formatDate, hasPermissionBtn } from '@/utils'
在methods:中写方法
/**
     * 权限限制展示
 */
 hasPerms(perms) {
    return hasPermissionBtn(perms)
 },
在所需要的按钮增加v-if判断
例如:
<el-button v-if="hasPerms('newlyAdded')" type="primary" style="float:right;width:100px;" @click="AddEvent">新增</el-button>

  

 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM