深圳培训网站开发,锡林郭勒建站,科技新闻最新消息10条,软件开发步骤包括哪些前提
你的菜单是根据路由动态生成的#xff0c;具体可以参考这篇博客对el-menu组件进行递归封装#xff08;根据路由配置动态生成#xff09;
描述 首先将路由分为常量路由constantRoute#xff08;所有用户都有的路由#xff09;和异步路由asyncRoute#xff08;需要动…前提
你的菜单是根据路由动态生成的具体可以参考这篇博客对el-menu组件进行递归封装根据路由配置动态生成
描述 首先将路由分为常量路由constantRoute所有用户都有的路由和异步路由asyncRoute需要动态加载的前端路由 每次进入系统时根据不同的用户向后端发送请求获取该用户的路由权限信息一般是个数组。 所使用的API
1.动态添加路由api
router.addRoute(parentName: string, route: RouteConfig): () void实现的例子
路由配置信息大概扫一眼就行就是v-router的配置
export const constantRoute [{path: /login,component: () import(/views/login/index.vue),name: login,meta: {title: 登录,hidden: true,},},{path: /,component: () import(/views/layout/index.vue),name: layout,meta: {title: ,hidden: false,icon: ,},redirect: /home,children: [{path: /home,component: () import(/views/home/index.vue),name: home,meta: {title: 首页,hidden: false,icon: HomeFilled,},},],},{path: /screen,component: () import(/views/screen/index.vue),name: Screen,meta: {title: 数据大屏,hidden: false,icon: DataBoard,},},{path: /404,component: () import(/views/404/index.vue),name: 404,meta: {title: Not Found,hidden: true,},},{path: /:pathMatch(.*)*,redirect: 404,name: Any,meta: {title: Not Found,hidden: true,},},
]export const asyncRoute [{path: /acl,component: () import(/views/layout/index.vue),name: Acl,meta: {title: 权限管理,hidden: false,icon: Lock,},redirect: /acl/user,children: [{path: /acl/user,component: () import(/views/acl/user/index.vue),name: User,meta: {title: 用户管理,hidden: false,icon: User,},},{path: /acl/role,component: () import(/views/acl/role/index.vue),name: Role,meta: {title: 角色管理,hidden: false,icon: Avatar,},},{path: /acl/permission,component: () import(/views/acl/permission/index.vue),name: Permission,meta: {title: 菜单管理,hidden: false,icon: List,},},],},{path: /product,component: () import(/views/layout/index.vue),name: Product,meta: {title: 商品管理,hidden: false,icon: Goods,},redirect: /product/trademark,children: [{path: /product/trademark,component: () import(/views/product/trademark/index.vue),name: Trademark,meta: {title: 品牌管理,icon: ShoppingCart,hidden: false,},},{path: /product/attr,component: () import(/views/product/attr/index.vue),name: Attr,meta: {title: 属性管理,icon: Management,hidden: false,},},{path: /product/spu,component: () import(/views/product/spu/index.vue),name: Spu,meta: {title: Spu,icon: SetUp,hidden: false,},},{path: /product/sku,component: () import(/views/product/sku/index.vue),name: Sku,meta: {title: Sku,icon: ScaleToOriginal,hidden: false,},},],},
]
// 计算异步路由信息
function generateRoutes(asyncRoutes: any, filterArr: string[]) {return asyncRoutes.filter((item: any) {if (filterArr.includes(item.name)) {if (item.children item.children.length 0) {item.children generateRoutes(item.children, filterArr)}return true}})
}
// filterArr 权限信息
const filterArr [Acl, User, Role, Product, Trademark]
const asyncRoutes generateRoutes(// 一定要使用深拷贝 用lodash的cloneDeep不要用JSON的那个cloneDeep(asyncRoute),filterArr,
)
// this.routes主要是侧边导航栏要的信息 可有可无
this.routes [...constantRoute, ...asyncRoutes,...anyRoute];
// 动态注册路由
[...asyncRoutes,...anyRoute].forEach((item:any) {router.addRoute(item)
});注意如果出现Vue 路由定义警告Component “default“ in record with path “/“ is a Promise这个问题可以尝试在路由前置守卫中加入判断使用next({ ...to })不懂得可以参考这篇
