## 菜单配置 > 详见文档的前端开发指南部分 #### 方式一 动态路由配置 <img src="https://ooo.0o0.ooo//2019/05/14/5cda9aac9145956471.png" alt="WX20190514-183737@2x.png" title="WX20190514-183737@2x.png" /> <img src="https://ooo.0o0.ooo//2019/05/14/5cda9ab18305955234.png" alt="WX20190514-183819@2x.png" title="WX20190514-183819@2x.png" width="350px"/> - 记得在角色菜单为该用户分配该新添加的菜单权限 #### 方式二 固定路由配置 - `src/router/router.js` ``` javascript // 作为Main组件的子页面展示但是不在左侧菜单显示的路由写在otherRouter里 export const otherRouter = { path: '/', name: 'otherRouter', redirect: '/home', component: Main, children: [ { path: 'test', title: '测试页面', name: 'test', component: () => import('@/views/xboot-vue-generator/test.vue') }, ] }; ``` ## 页面编写 ~~~ javascript // test.vue文件 <template> <div> <Card> <h1>代码生成测试页 可将生成的代码全部粘贴至此test.vue文件</h1> </Card> </div> </template> ~~~ ## 请求获取后台数据 - 文件可以被访问后,接下来就是完善界面信息,从后台获取数据 - 获取数据的方法建议都写在统一的api文件夹中,方便统一修改 ```javascript // 统一请求路径前缀在libs/axios.js中修改 import { getRequest, postRequest, putRequest, postBodyRequest, getNoAuthRequest, postNoAuthRequest } from '@/libs/axios'; // 登陆 export const login = (params) => { return postNoAuthRequest('/login', params) } ``` ### axios()函数 - axios()可以设置全局的配置,例如请求头信息,拦截器等,这样的好处是可以避免重复配置。`src/libs/axios.js`中已封装好各种请求方法 - 关于axios()的使用可以参考:[https://www.kancloud.cn/yunye/axios/234845](https://www.kancloud.cn/yunye/axios/234845)