vue项目 动态路由怎么做

 我来答
世纪网络17
2022-06-02 · TA获得超过5951个赞
知道小有建树答主
回答量:2426
采纳率:100%
帮助的人:143万
展开全部

vue项目实现 动态路由 的方式大体可分为两种:

前端这边把路由写好,登录的时候根据用户的角色权限来动态展示路由,(前端控制路由)
详情可参阅 花裤衩大佬 的项目 手把手...

后台传来当前用户对应权限的路由表,前端通过调接口拿到后处理(后端处理路由)

这两种方法各有优点,效果都能实现,我们公司是通过第二中种方法实现的,原因就是公司项目里有一个专门的用户中心,里边逻辑很复杂,不好返给前端用户权限,担心路由放到前端不安全(以上的话是公司的后台同学讲的),那好吧,抱着都试试、锻炼下自己能力的态度,我们搞了第二种方法。

大体步骤:拦截路由->后台取到路由->保存路由到localStorage(用户登录进来只会从后台取一次,其余都从本地取,所以用户,只有退出在登录路由才会更新)

菜单名字menName;
菜单路径menPath;
菜单指向的资源menuUrl(也就是组件地址, 一般从views层级开始写)

前端登录后通过接口请求拿到菜单数据后,

menName ---> name
menPath ---> path
menuUrl ---->components文件

转换时,用到这个方法找组件资源 把 menuUrl 可以变为components的格式,转为组件文件

生成路由表

可以再过滤一遍生成的路由表
下面这个方法找到views底下所有的组件资源

路由表里路由的组件在所有组件资源里没找到时,将该路由的path变为/404

getRouter.push({ path: '*', redirect: '/404', hidden: true });
router.addRoutes(getRouter); //动态添加路由

前置工作:配置项目路由文件,该文件中没有路由,或者存在一部分公共路由,即没有权限的路由

每个路由都使用到组件Layout,这个组件是整体的页面布局:左侧菜单列,右侧页面,所以children下边的第一级路由就是你自己的开发的页面,meta里包含着路由的名字,以及路由对应的icon;
因为可能会有多级菜单,所以会出现children下边嵌套children的情况;
路由是数组格式

实际前端需要的 component是 component: () => import('@/views/content/classify'),

因为有多级路由的出现,所以要写成遍历递归方法,确保把每个component转成组件对象
因为后台传回的是字符串,所以要把加载组件的过程 封装成一个方法,用这个方法在遍历中使用;详情查看项目里的router文件夹下的 _import_development.js和_import_production.js文件
Layout我放的目录跟其他文件的目录不一样,所以我在遍历里单独处理,各位小伙伴可自己调整哈

beforeEach路由拦截,进入判断,如果发现本地没有路由数据,那就利用axios后台取一次,取完以后,利用localStorage存储起来,利用addRoutes动态添加路由,

ps:beforeEach好坏啊,一步小心就进入到了他的死循环,浏览器都tm崩了,得在一开始就加判断,拿到路由了,就直接next(),嘤嘤嘤
global.antRouter是为了传递数据给左侧菜单组件进行渲染

上边第三步会给 global.antRouter赋值,这是一个全局变量(可以用vuex替代),菜单那边拿到路由,进行渲染

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式