vue添加动态路由控制菜单

最新推荐文章于 2024-12-03 09:18:03 发布

huxihua2006

最新推荐文章于 2024-12-03 09:18:03 发布

阅读量509

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/huxihua2006/article/details/128641099

版权

本文介绍了如何在Vue.js应用中实现动态路由控制，结合菜单管理，为不同用户提供功能授权标识。步骤包括在菜单页面新增功能授权，通过控制台打印标识，并进行用户授权设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先在菜单管理的页面下面新增功能授权标识
在这里插入图片描述
2.打印标识到控制台
3.给相应的用户授权

2.在页面中打印授权标识到控制台查看
mounted() {
    console.log(window.SITE_CONFIG['permissions'])
    console.log(this.$hasPermission('system:menu:list'))
    }
3.vue页面可以根据授予的标识是否显示还是隐藏
<el-menu-item index="1" v-if="$hasPermission('outlet:menu:add')"
        >新增</el-menu-item
      >
4.其它情况也可适用
 <el-menu-item
        index="1"
        v-if="$hasPermission('outlet:menu:save') && operatexz === '新增'"
        >保存</el-menu-item
      >