Ant Design Vue pro 動態(tài)路由的實現(xiàn)和打包方式
更新時間：2023年06月30日 09:51:45 作者：曉果博客
這篇文章主要介紹了Ant Design Vue pro 動態(tài)路由的實現(xiàn)和打包方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
配置路由權(quán)限
在config文件夾下router.config.js中配置路由權(quán)限
如下圖所示
配置請求網(wǎng)絡(luò)接口
在api文件夾下login.js中
根據(jù)自己后臺的數(shù)據(jù)修改路由權(quán)限封裝規(guī)則
在store/module/user.js中修改GetInfo方法
源js
修改后js
后臺數(shù)據(jù)示例
{
"code": 200,
"data": {
"avatar": "/avatar2.jpg",
"contact_mobile": "",
"name": "曉果哈哈哈",
"role": {
"contact_mobile": "13273026553",
"contact_name": "平臺管理員",
"permissions": [
{
"permissionId": "usermanagement",
"permissionName": "用戶管理"
},
{
"permissionId": "voicemanage",
"permissionName": "語音管理"
},
{
"permissionId": "appmanagement",
"permissionName": "App管理"
},
{
"permissionId": "vipmanagement",
"permissionName": "VIP管理"
},
{
"permissionId": "brandownermanage",
"permissionName": "品牌商管理"
},
{
"permissionId": "machinemanage",
"permissionName": "機器管理"
},
{
"permissionId": "softwaremanage",
"permissionName": "軟件管理"
},
{
"permissionId": "officialaccounts",
"permissionName": "公眾號設(shè)置"
}
]
}
},
"message": "獲取數(shù)據(jù)成功"
}動態(tài)路由效果完成
修改退出登錄需要兩次退出問題
修改根目錄下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é)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue項目中的類使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
防抖、節(jié)流是為了在某個事件頻繁發(fā)生時,不把這個頻繁的事件內(nèi)的操作也這么頻繁的觸發(fā),這篇文章主要介紹了Vue中防抖與節(jié)流實現(xiàn)方法的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2026-03-03
Vue 中 filter 與 computed 的區(qū)別與用法解析
這篇文章主要介紹了Vue 中 filter 與 computed 的區(qū)別與用法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
文章介紹了兩種將前端頁面指定區(qū)域?qū)С鰹镻DF的純前端實現(xiàn)方法,方式一使用jsPDF和html2canvas將特定區(qū)域轉(zhuǎn)化為圖片,再將圖片轉(zhuǎn)化為PDF,適用于小區(qū)域轉(zhuǎn)換,但存在翻頁時內(nèi)容拆分的問題,方式二使用html2pdf.js,支持自動分頁,適用于較大區(qū)域的轉(zhuǎn)換2025-10-10
嵌套路由顧名思義就是路由的多層嵌套,這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)路由嵌套的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-11-11
前端vue如何根據(jù)菜單自動生成路由(動態(tài)配置前端路由)
估計有不少人遇過這樣的需求:根據(jù)后臺數(shù)據(jù)動態(tài)添加路由和菜單,這篇文章主要給大家介紹了關(guān)于前端vue如何根據(jù)菜單自動生成路由的相關(guān)資料,需要的朋友可以參考下2024-04-04
在Vue中,背景圖跨頁面顯示問題可通過生命周期鉤子（如mounted和beforeDestroy）實現(xiàn)動態(tài)控制,確保僅在主頁加載背景圖,登錄頁等其他頁面可移除,從而實現(xiàn)差異化樣式應(yīng)用2025-08-08
今天小編就為大家分享一篇基于vue中keep-alive緩存問題的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
詳解vue2.0監(jiān)聽屬性的使用心得及搭配計算屬性的使用
這篇文章主要介紹了vue2.0之監(jiān)聽屬性的使用心得及搭配計算屬性的使用,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
VUE+Element-ui實戰(zhàn)之使用el-calendar日歷自定義顯示內(nèi)容
這篇文章主要介紹了VUE+Element-ui實戰(zhàn)之使用el-calendar日歷自定義顯示內(nèi)容方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03