基礎介紹
CRMEB后臺管理是基于vue2技術棧進行開發(fā)搭建的
Vue Router 使用的是v3版本,mode為history
模式 如需修改 mode
請在src/setting.js
中修改routerMode
新建頁面
新建路由
根據(jù)目錄結(jié)構(gòu),需要在src/router/modules
中對應模塊中,添加對應路由(如有其他模塊建議另行創(chuàng)建)
實例中:該頁面的訪問路徑(路由地址)為 /admin/order/list
// 實例 該路由創(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'], // 路由權限
title: '訂單管理',
},
component: () => import('@/pages/order/orderList/index'), // 動態(tài)引入 對應pages中文件路徑
}
],
};
注意
如果你添加的是新建模塊 指:在src/router/modules
中新建路由文件
你還需要再 src/router/routers.js
中進行引入
在上方引入并在下方使用
創(chuàng)建文件
在src/pages
下創(chuàng)建模塊文件 例如test
,模塊中在添加對應的功能文件
添加規(guī)則
運行起后臺admin項目找到對應目錄 設置/權限管理/權限規(guī)則
如果是創(chuàng)建一級目錄點擊圖中1
添加規(guī)則,如果是在對應一級模塊下創(chuàng)建二級或三級目錄 根據(jù)列表及展開項,點擊后方2
添加子菜單進行添加。
添加子菜單注意事項
必填項
按鈕名稱、路由地址為必填項(如果創(chuàng)建一級目錄,需添加對應圖片,可點擊圖片后方icon進行選擇)
路由
路由地址參加第一步中 路由創(chuàng)建后的路由地址進行添加 例如:/admin/user/list
權限
權限標識參考第一部中 meta中auth 填寫的權限規(guī)則
其他問題
1.如果需要添加規(guī)則效驗可在 src/router/index.js
中進行添加具體使用方法可參考官方示例導航守衛(wèi)
2.如果按上面布置添加完成頁面卻出現(xiàn) 該頁面不存在時。請檢查路由文件及權限規(guī)則中路徑添加是否正確。
3.如果出現(xiàn) 因權限無法訪問問題
- 請檢查規(guī)則添加的權限與路由文件中的權限規(guī)則是否一致
- 檢查
設置/角色管理
中的菜單權限