基礎(chǔ)介紹
CRMEB后臺(tái)管理是基于vue2技術(shù)棧進(jìn)行開發(fā)搭建的
Vue Router 使用的是v3版本，mode為history模式 如需修改 mode 請(qǐng)?jiān)?span style="color: rgb(255, 80, 44); background-color: rgb(255, 245, 245);">src/setting.js中修改routerMode
新建頁面
新建路由
根據(jù)目錄結(jié)構(gòu)，需要在src/router/modules中對(duì)應(yīng)模塊中，添加對(duì)應(yīng)路由（如有其他模塊建議另行創(chuàng)建）
實(shí)例中：該頁面的訪問路徑(路由地址)為 /admin/order/list
// 實(shí)例 該路由創(chuàng)建成功后 訪問路徑為 /admin/order/list
import BasicLayout from '@/components/main';
const pre = 'order_';
export default {
path: '/admin/order',
name: 'order',
header: 'order',
redirect: {
name: `${pre}list`,
},
component: BasicLayout, // 布局組件
children: [
{
path: 'list',
name: `${pre}list`,
meta: {
auth: ['admin-order-storeOrder-index'], // 路由權(quán)限
title: '訂單管理',
},
component: () => import('@/pages/order/orderList/index'), // 動(dòng)態(tài)引入 對(duì)應(yīng)pages中文件路徑
}
],
};
注意
如果你添加的是新建模塊 指：在src/router/modules中新建路由文件
你還需要再 src/router/routers.js中進(jìn)行引入
在上方引入并在下方使用
創(chuàng)建文件
在src/pages下創(chuàng)建模塊文件 例如test,模塊中在添加對(duì)應(yīng)的功能文件
添加規(guī)則
運(yùn)行起后臺(tái)admin項(xiàng)目找到對(duì)應(yīng)目錄 設(shè)置/權(quán)限管理/權(quán)限規(guī)則
如果是創(chuàng)建一級(jí)目錄點(diǎn)擊圖中1添加規(guī)則，如果是在對(duì)應(yīng)一級(jí)模塊下創(chuàng)建二級(jí)或三級(jí)目錄 根據(jù)列表及展開項(xiàng)，點(diǎn)擊后方2添加子菜單進(jìn)行添加。
添加子菜單注意事項(xiàng)
必填項(xiàng)
按鈕名稱、路由地址為必填項(xiàng)（如果創(chuàng)建一級(jí)目錄，需添加對(duì)應(yīng)圖片，可點(diǎn)擊圖片后方icon進(jìn)行選擇）
路由
路由地址參加第一步中 路由創(chuàng)建后的路由地址進(jìn)行添加 例如：/admin/user/list
權(quán)限
權(quán)限標(biāo)識(shí)參考第一部中 meta中auth 填寫的權(quán)限規(guī)則
其他問題
1.如果需要添加規(guī)則效驗(yàn)可在 src/router/index.js中進(jìn)行添加具體使用方法可參考官方示例導(dǎo)航守衛(wèi)
2.如果按上面布置添加完成頁面卻出現(xiàn) 該頁面不存在時(shí)。請(qǐng)檢查路由文件及權(quán)限規(guī)則中路徑添加是否正確。
3.如果出現(xiàn) 因權(quán)限無法訪問問題
- 請(qǐng)檢查規(guī)則添加的權(quán)限與路由文件中的權(quán)限規(guī)則是否一致
- 檢查
設(shè)置/角色管理中的菜單權(quán)限
