// main.js
vue.prototype.routerload =
else/$
.vue`),
meta:}}
})},
// 獲取選單
loadmenus()
`).then
(res =>
// 重新整理後的路由跳轉
router.
push()
}).catch
(err =>);
}}}//使用鉤子函式對路由進行許可權跳轉
router.
beforeeach
((to,
from
, next)
=>})
newvue(}
}).$mount()
----
----
----
----
----
----
----
----
----
----
----
----
----
----
----
----
----
----
-------
// login.vue 頁面
// 登陸成功後
sessionstorage.
setitem
('token'
,123465
)this
.routerload.
loadmenus()
// 跳轉首頁
this
.$router.
push
('/dashboard')--
----
----
----
----
----
----
----
----
----
----
----
----
----
----
----
----
----
----
----
-// store.js
import vue from
"vue"
import vuex from
'vuex'
vue.
use(vuex)
;const store =
newvuex.store(,
mutations:},
actions:
, getters:})
;export
default store
// main.js
vue.prototype.routerload =
else
if(item.subs)}}
)return obj
},/**
* 遍歷函式
*/arr(arr, roletree, roletreeobj)
// 最外層選單---一級選單
if(item.id == item.superior)
else
// 判斷物件中的父級id是否存在if(
!roletreeobj[item.superior]
) roletreeobj[item.superior]
.push
(itemobj)
}else
obj.subs.
push
(itemobj)}}
})// 遍歷完成，返回選單陣列和選單物件
return},
/** * 物件遍歷函式
*/binaliobj
(allobj)
obj.subs.
push
(...allobj.roletreeobj[key]
)// 每新增乙個就刪除物件裡面對應的值
delete allobj.roletreeobj[key]}}
// for in 迴圈完後判斷物件裡面是否還有資料
if(object.
keys
(allobj.roletreeobj)
.length !=0)
// return allobj.roletree
// 複雜資料型別，所以不需要return出來
return
false},
/** * 陣列排序
*/sortarr
(arr)
else
if(a.sort == b.sort)
else})
// 多維陣列，所以遍歷排序
arr.
foreach
(item =>})
;},// 遍歷新增路由
bianli
(arr)
else
.vue`)}
else
if(v.index ==
'/si'
)else
$.vue`)}
},meta:}}
})},
// 獲取選單
loadmenus()
) console.
log(allobj)
// 再次=遍歷，用於解決選單物件，最後返回乙個完整版的選單陣列
this
.binaliobj
(allobj)
// 排序
this
.sortarr
(allobj.roletree)
// vuex中儲存 選單列表 用於頁面選單的顯示
store.
commit
('setmenus'
, allobj.roletree)
// 路由新增
let routerarr =
this
.bianli
(allobj.roletree)
.flat(9
) router.options.routes[1]
.children.
push
(...routerarr)
; router.
addroutes
(router.options.routes)
; console.
log(router)
// 重新整理後跳轉到重新整理前頁面 --- 這個if判斷好像有點多餘，因為路由裡面有了重定向
if(sessionstorage.
getitem
('path')==
'/')
// 重新整理後的路由跳轉
router.
push()
}).catch
(err =>);
}}//使用鉤子函式對路由進行許可權跳轉
router.
beforeeach
((to,
from
, next)
=>})
newvue(}
}).$mount()
----
----
----
----
----
----
----
----
----
----
----
----
----
----
----
----
----
----
-------
// login.vue 頁面
// 登陸成功後
sessionstorage.
setitem
('token'
,123465
)this
.routerload.
loadmenus()
// 跳轉首頁
this
.$router.
push
('/')--
----
----
----
----
----
----
----
----
----
----
----
----
----
----
----
----
----
----
----
-// store.js
import vue from
"vue"
import vuex from
'vuex'
vue.
use(vuex)
;const store =
newvuex.store(,
mutations:},
actions:
, getters:})
;export
default store
/** * 第二中情況還有一種解決方法：
* 1. 先通過 id == parentid 來獲取最外層選單，放到乙個陣列裡
* 2. 然後遍歷兩個陣列，通過 id == parentid，匹配成功就 push 進當前的陣列項
* 3. 按照步驟二迴圈遍歷，直至後台返回的陣列裡面沒有資料
*/
vue 選單許可權
src router index.js import vue from vue import router from vue router import store from store import nprogress from nprogress import nprogress nprogre...
vue處理選單許可權
vue專案處理選單許可權 第一種 後台直接返回選單資料，例如 menulist 資料返回後，直接拿到el menu中去遍歷 個人使用的elementui default active routh router collapse iscollapse class el menu vertical de...
Vue選單欄許可權
她早已目視前方從來都不回頭看,加快了步伐從不在乎年華已過半,堅定的眼神 過去的遺憾 話不多說，選單欄許可權 根據後端返回的資料進行渲染 後台返回的資料結構 未處理根據parentid 分離出父子級選單 有null為父級 沒有為子級 側邊導航欄資料結構 處理後的結構 childrenmenulis如果...