# vue-demo

**Repository Path**: wzwzwz555/vue-study

## Basic Information

- **Project Name**: vue-demo
- **Description**: 学习Vue-Element-Admin开源项目，抽出来的vue后端模板，包括基础的左右布局，svg图标，面包屑，多标签等。只要按照路由规则添加页面即可进入开发。
- **Primary Language**: Java
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-12-10
- **Last Updated**: 2021-12-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#                           vue-demo后台管理模板

## 1.介绍

学习Vue-Element-Admin开源项目，抽出来的vue后端模板，包括基础的左右布局，svg图标，面包屑，多标签等。只要按照路由规则添加页面即可进入开发。

**注意事项：第一次编译可能会报错，如图：**

```js
 63:25  error  Unnecessary escape character: \[  no-useless-escape
 63:50  error  Unnecessary escape character: \[  no-useless-escape
```

**此时不用更改任何东西，重新点击运行即可**

## 2.路由守卫

`@/permission.js`文件是**全局路由守卫，处理路由变化，以及根据用户信息动态生成路由**，关键代码：

```js
const { roles } = await store.dispatch('user/getInfo')

// 根据角色获取动态路由
const accessRoutes = await store.dispatch('permission/generateRoutes', roles)

 
router.addRoutes(accessRoutes)
```

**生成路由的弊端：**`vue-elelement-admin`通过在元数据meta中设置roles属性来动态匹配路由：

```js
meta: {
  roles: ['admin', 'editor'] // 设置该路由进入的权限，支持多个权限叠加
}
```

这样一来，如果我想后期**添加一个角色，匹配一些路由**，就得**修改代码**，在路由表里将角色写入，无法**通过页面**动态设置。

**改进方案：**个人想法就是**修改它的路由匹配规则**，参考`vhr`项目的写法：

```js
export const formatRoutes = (routes) => {
    let fmRoutes = [];
    routes.forEach(router => {
        let {
            path,
            component,
            name,
            meta,
            iconCls,
            children
        } = router;
        if (children && children instanceof Array) {
            children = formatRoutes(children);
        }
        let fmRouter = {
            path: path,
            name: name,
            iconCls: iconCls,
            meta: meta,
            children: children,
            component(resolve) {
                if (component.startsWith("Home")) {
                    require(['../views/' + component + '.vue'], resolve);
                } else if (component.startsWith("Emp")) {
                    require(['../views/emp/' + component + '.vue'], resolve);
                } else if (component.startsWith("Per")) {
                    require(['../views/per/' + component + '.vue'], resolve);
                } else if (component.startsWith("Sal")) {
                    require(['../views/sal/' + component + '.vue'], resolve);
                } else if (component.startsWith("Sta")) {
                    require(['../views/sta/' + component + '.vue'], resolve);
                } else if (component.startsWith("Sys")) {
                    require(['../views/sys/' + component + '.vue'], resolve);
                }
            }
        }
        fmRoutes.push(fmRouter);
    })
    return fmRoutes;
}
```

将**后端返回的数据解析成路由对象，再动态添加到路由表里**。可以根据需要**通过代码生成符合路由规则的路由对象**。

**`有关路由设置规则可在vue-element-admin官网查看`**：https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/essentials/router-and-nav.html

## 3.自定义指令

在`@/directives`中可以自定义指令，如定义按钮级别的权限判断指令