type
status
date
slug
summary
tags
category
icon
password
ext
order
comment
主要思路,从后台取到菜单数据,前端根据数据生成路由配置以及菜单。
后台根据前端的用户信息返回对应权限的菜单数据,省的在前端写好路由再配置权限了。
本功能使用vuex进行统一集中式的管理,这里不过多解释。
主要步骤如下:
1.从后台取对应用户权限的菜单数据
2.遍历数据,生成父路由及其子路由组件,添加到路由表中。
3.同时菜单数据也要保存到sessionStorage中,避免每次都从后台取,而且避免URL刷新空白,后面会提到。
我后台返回的菜单数据格式如下
为了添加路由时导入组件方便,我的vue组件目录结构是和菜单URL完全对应的
首先放一下我的路由配置,里面这个constantRouterMap 是固定的路由表,在没有从接口取数据生成路由时也可访问。
首先定义一个action用于从接口获取菜单数据,前面说过每次获取菜单数据时都要在sessionStorage中保存一下,避免每次都要从接口请求数据
然后还需要一个mutations是用于设置菜单及路由
接下来是上面代码中调用的这个mutations:SetRouters用于生成路由
menuToRouter用于将接口返回的数据转换为路由组件,代码如下
SetMenuTitle是因为我Tab选项卡那里的需求,所以写了一个这
还有是注意添加路由是需要加载组件的,路由中的component属性,我这里是根据菜单URL导入对应的组件,主要代码是
在router文件夹下有两个文件,分别为_import_development.js以及_import_production.js
_import_development.js
_import_production.js
还有一个最重要的,使用动态路由时,当你在首页(加载路由数据的页面)以外,刷新一下会直接变空白,这是由于子路由是动态添加的,界面刷新的时候,其实我们路由里面并没有该子路由的配置,在页面刷新时候,在router.beforeEach里面去判断,如果是页面刷新且无子路由配置,就调用获取菜单并生成路由的方法,判断条件==3是因为我的固定路由表里默认是3个
最后放下完整代码
还有getter.js中代码
- 作者:Loneking
- 链接:https://loneking.cn/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/64
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。