基于vue-element-admin基础模板实现侧边栏菜单动态渲染码云仓库:
【正⽂】
基于 vue-admin-template 基础模板实现动态⽣成侧边栏菜单
【思路】
获取⽤户信息的时候,把后端返回的路由保存在 store ⾥⾯,执⾏⽣成路由时,合并前端静态定义的路由以及后端获取回来的动态路由
【主要修改⽂件】
src/permission.js
src/store/modules/permission.js
utils/_import.js
utils/router.js
⽂件: ` src/permission.js `
获取⽤户信息,存储路由
` const { roles } = await store.dispatch('basic/getInfo') `
合并路由,渲染路由
` const accessRoutes = await store.dispatch('permission/generateRoutes', { 'roles': roles, 'routers': uters }) `
【后端返回数据结构】
具体根据框架原本需要返回的结构即可。组件那⾥返回组件名称,会实现⾃动加载
routers = [
{
path: '/',
component: 'Layout',
redirect: '/dashboard',
children: [
{
path: 'dashboard',
name: 'Dashboard',
component: 'dashboard', meta: {
title: '仪表盘',
icon: 'dashboard'
}
}
]
}
]
【vue-element-admin】
>vue element admin
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论