酒店管理系统.4-角色页面Role.vue

在views文件夹中新建一个role文件夹，在role文件夹中新建一个Role.vue组件，并为该页面配置路由，由于该页面是Manager.vue的子页面，所以为manager配置 子路由（children） ，如下图所示

并在Manager页面中所留的div.bottom中添加路由视图组建，给角色管理标签添加一个点击事件，路由跳转至子路由页面，这样我们就可以进行点击跳转了

element-plus组件库对组件自身进行了路由封装，当我们给标签添加一个router属性（开启路由模式）时，直接将跳转的路由路径写在标签的index中（index属性设置路由地址），就可以替代上述 *** 作。

下面就是角色管理页面的编写

首先我们要获取页面数据，离不开向后台发送请求，如下图所示，我们将页面大致画好，并定义一些数据

在api文件夹中创建roleAPI.vue，并导入$get方法

在Role.vue中从roleAPI中导入$list，使用该方法，将返回的值赋值给表格数据tableData，这样页面就完成了渲染

您是想问vue移动端怎么取角色值吗？您可以按照以下步骤进行：

1、定义一个角色变量，通常命名为role。

2、在vue组件中，通过props属性将角色值传递给组件。

3、使用computed属性定义一个角色计算属性，用于根据传递的角色值计算当前用户的角色。

4、根据计算属性的值，显示不同的内容或执行不同的 *** 作，来区分不同的用户角色。

步骤：1. 新建permission.js 实现自定义指令的钩子方法：

importstorefrom'@/store'exportdefault{inserted(el,binding){const{value}=bindingconstroles=store.getters&&store.getters.rolesif(value&&valueinstanceofArray){if(value.length>0){constpermissionRoles=valueconsthasPermission=roles.some(role=>{returnpermissionRoles.includes(role)})if(!hasPermission){el.parentNode&&el.parentNode.removeChild(el)}}}else{thrownewError(`使用方式： v-permission="['admin','editor']"`)}}}

新建index.js 将permission转为install：

在main.js中用use方法使用permission：

在模板中使用v-permission控制访问权限:

第二种方式：Vue.prototype+install+v-if实现用户角色权限控制：

新建permission.js，将checkPer方法注册到Vue.prototype，并注册为install方法：

importstorefrom'@/store'/** * @param {Array} value * @returns {Boolean} * @example see @/views/permission/directive.vue */exportdefault{install(Vue){Vue.prototype.checkPer=(value)=>{if(value&&valueinstanceofArray&&value.length>0){constroles=store.getters&&store.getters.rolesconstpermissionRoles=valuereturnroles.some(role=>{returnpermissionRoles.includes(role)})}else{console.error(`need roles! Like v-permission="['admin','editor']"`)returnfalse}}}}

在main.js中引入permission, 并用use方法:

使用：配合 v-if 在模板中实现权限控制：

---