## 菜單配置 > 詳見文檔的前端開發指南部分 #### 方式一 動態路由配置 <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()的使用可以參考：[http://www.hmoore.net/yunye/axios/234845](http://www.hmoore.net/yunye/axios/234845)