页面的配置

1：这时候我点击各个组件的时候都会跳转并且显示内容了，现在就进行页面的配置了，

我想把上面的那个创建出来，需要做appmain中创建一个link-vue组件里面写下面的内容，再在appmain展示组件引入一下，就好了 v-show true显示，false不显示

2：角色页面

基础搭建效果：

自己去element-ui里面找表单的内容

3：把数据真正导入------后台

创建一个这个角色表，然后在路由中创建接口，返回响应数据

 写完了，去前台了

在api下创建一个role.js写个方法

 在组件中调用

4:角色新增按钮的实现过程

首先在role组件中写element-ui里面的对话框内容然后进行改删，就有了这个创建角色按钮之后，在data中定义里面的一下你添加角色的对象，还有你定义的menus权限，（当前这个角色都有哪些权限，根据这些权限后面要处理左侧列表都显示哪些），然后也要控制一下这个表单是否默认弹出，在data下定义roleFormVisible: false，这样表单在进入页面的时候就不会自动弹出，然后第三步就进行handleAdd（创建角色按钮绑定的方法）里面写this.roleFormVisible = true，点击按钮触发方法，让弹窗显示出来，在弹出弹窗之后，等弹窗内容加载执行完毕了，在重置一下，以免下次打开还会有这些内容。

接下来写要确定和取消按钮的提交定义叫addData（里面传from表单的名字（ref定义的那个））

addData方法接收一个形参，然后获取到表单的信息，如果有值就发送ajax请求，没有就返回错误，然后既然接受表单信息了就涉及到表单校验，所以要写一下表单校验的规则

在element-ui组件中找到带校验功能的表单然后看怎么说，（Form 组件提供了表单验证的功能，只需要通过 v-bind：rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。）在data定义的校验规则绑定的名字然后再里面写复制elelment-ui里面的方法，就可以了

这时候点击确定不会变，因为还没有写，先放着一会再写

4.2：后台

接下来写后台添加角色的接口，写完之后测试一下，能够成功，

4.3前台

 在前台的api方法里面写一个和后台相匹配的调用接口发送请求的 方法，然后再组件里面调用这个方法就可以了。

到这创新按钮的功能就完全实现了。

5：接下来就要写，设置角色权限了