组件和权限使用

组件

局部注册

vue3 怎么使用这里就怎么用

全局注册

• 找到 main.js 文件

// 图片上传组件
import ImageUpload from "@/components/ImageUpload";

// 全局注册组件
app.component("ImageUpload", ImageUpload);

权限使用

v-hasPermi 命令

// 单个
<el-button v-hasPermi="['system:user:add']">存在权限字符串才能看到</el-button>
// 多个
<el-button v-hasPermi="['system:user:add', 'system:user:edit']"
  >包含权限字符串才能看到</el-button
>

v-hasRole 命令

// 单个
<el-button v-hasRole="['admin']">存在角色字符串才能看到</el-button>
// 多个
<el-button v-hasRole="['admin', 'editor']">包含角色字符串才能看到</el-button>

使用方法

<template>
  <el-tabs>
    <el-tab-pane
      v-if="checkPermi(['system:user:add'])"
      label="用户管理"
      name="user"
      >用户管理</el-tab-pane
    >
    <el-tab-pane
      v-if="checkPermi(['system:user:add', 'system:user:edit'])"
      label="参数管理"
      name="menu"
      >参数管理</el-tab-pane
    >
    <el-tab-pane v-if="checkRole(['admin'])" label="角色管理" name="role"
      >角色管理</el-tab-pane
    >
    <el-tab-pane
      v-if="checkRole(['admin','common'])"
      label="定时任务"
      name="job"
      >定时任务</el-tab-pane
    >
  </el-tabs>
</template>

<script>
  import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数

  export default {
    methods: {
      checkPermi,
      checkRole,
    },
  };
</script>

多级目录嵌套

如果你的路由是多级目录，有三级路由嵌套的情况下，还需要手动在二级目录的根文件下添加一个 <router-view>。