Ant Design Vue pro 動(dòng)態(tài)路由的實(shí)現(xiàn)和打包方式
更新時(shí)間：2023年06月30日 09:51:45 作者：曉果博客
這篇文章主要介紹了Ant Design Vue pro 動(dòng)態(tài)路由的實(shí)現(xiàn)和打包方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
配置路由權(quán)限
在config文件夾下router.config.js中配置路由權(quán)限
如下圖所示
配置請(qǐng)求網(wǎng)絡(luò)接口
在api文件夾下login.js中
根據(jù)自己后臺(tái)的數(shù)據(jù)修改路由權(quán)限封裝規(guī)則
在store/module/user.js中修改GetInfo方法
源js
修改后js
后臺(tái)數(shù)據(jù)示例
{
"code": 200,
"data": {
"avatar": "/avatar2.jpg",
"contact_mobile": "",
"name": "曉果哈哈哈",
"role": {
"contact_mobile": "13273026553",
"contact_name": "平臺(tái)管理員",
"permissions": [
{
"permissionId": "usermanagement",
"permissionName": "用戶管理"
},
{
"permissionId": "voicemanage",
"permissionName": "語(yǔ)音管理"
},
{
"permissionId": "appmanagement",
"permissionName": "App管理"
},
{
"permissionId": "vipmanagement",
"permissionName": "VIP管理"
},
{
"permissionId": "brandownermanage",
"permissionName": "品牌商管理"
},
{
"permissionId": "machinemanage",
"permissionName": "機(jī)器管理"
},
{
"permissionId": "softwaremanage",
"permissionName": "軟件管理"
},
{
"permissionId": "officialaccounts",
"permissionName": "公眾號(hào)設(shè)置"
}
]
}
},
"message": "獲取數(shù)據(jù)成功"
}動(dòng)態(tài)路由效果完成
修改退出登錄需要兩次退出問(wèn)題
修改根目錄下permission.js
源js
修改后js
刪除
if (to.path === loginRoutePath) {
next({ path: defaultRoutePath })
NProgress.done()
}打包
在vue.config.js中添加：
publicPath:'./', ? outputDir:'dist',
修改router下index.js
export default new Router({
? mode: 'hash',
? routes: constantRouterMap
})
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Windows系統(tǒng)下使用nginx部署vue2項(xiàng)目的全過(guò)程
nginx是一個(gè)高性能的HTTP和反向代理服務(wù)器,因此常用來(lái)做靜態(tài)資源服務(wù)器和后端的反向代理服務(wù)器,下面這篇文章主要給大家介紹了關(guān)于Windows系統(tǒng)下使用nginx部署vue2項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2023-03-03
Vuex持久化存儲(chǔ)之vuex-persist問(wèn)題
這篇文章主要介紹了Vuex持久化存儲(chǔ)之vuex-persist問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
詳解Vue的computed(計(jì)算屬性)使用實(shí)例之TodoList
本篇文章主要介紹了詳解Vue的computed(計(jì)算屬性)使用實(shí)例之TodoList，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
vue2.0如何動(dòng)態(tài)綁定img的src屬性(三元運(yùn)算)
這篇文章主要介紹了vue2.0如何動(dòng)態(tài)綁定img的src屬性(三元運(yùn)算)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue中的render函數(shù),它返回的是一個(gè)虛擬節(jié)點(diǎn)vnode,也就是我們要渲染的節(jié)點(diǎn),下面這篇文章主要給大家介紹了關(guān)于Vue中render函數(shù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
vue vantUI實(shí)現(xiàn)文件（圖片、文檔、視頻、音頻）上傳（多文件）
這篇文章主要介紹了vue vantUI實(shí)現(xiàn)文件（圖片、文檔、視頻、音頻）上傳（多文件），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Vuex中actions優(yōu)雅處理接口請(qǐng)求的方法
在項(xiàng)目開發(fā)中，如果使用到了 vuex，通常我會(huì)將所有的接口請(qǐng)求單獨(dú)用一個(gè)文件管理，這篇文章主要介紹了Vuex中actions如何優(yōu)雅處理接口請(qǐng)求,業(yè)務(wù)邏輯寫在 actions 中，本文給大家分享完整流程需要的朋友可以參考下2022-11-11
關(guān)于Echarts餅圖圖例太長(zhǎng)的解決方案
這篇文章主要介紹了關(guān)于Echarts餅圖圖例太長(zhǎng)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
富文本編輯器quill.js開發(fā)之自定義格式擴(kuò)展
這篇文章主要為大家介紹了富文本編輯器quill.js開發(fā)之自定義格式擴(kuò)展,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Vue實(shí)現(xiàn)表格批量審核功能實(shí)例代碼
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)表格批量審核功能實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05