vue根据后端菜单数据生成动态路由

sqwu

于 2020-08-20 16:04:40 发布

阅读量9.2k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： vue 动态路由

本文链接：https://blog.csdn.net/qq_42345108/article/details/108124241

本文介绍了如何根据后端返回的菜单数据动态生成Vue路由。首先注释或删除写死的路由，然后创建asyncRouter.js来解析菜单数据。在获取菜单时同步生成路由表，根据菜单结构构建组件路径和meta信息。在刷新时，由于动态路由问题，需要在sessionStorage中保存上次页面，以避免重定向问题。最后，作者提到动态路由导致的页面刷新跳转延迟和白屏问题，希望能找到更好的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态路由初体验，存在不足，欢迎点评指正~

前言：在之前的项目中，菜单是动态获取的，而路由是写死的，配置路由的时候只要保证路由的path与菜单的index（elementUI的el-menu组件）相同就可以实现路由跳转，只是菜单改了的话，路由也得相应修改，否则就会找不到页面。当时之所以没有研究动态路由是觉得跳转的页面是路由指定的，如果路由变成动态获取的话，前端的页面文件命名和目录结构都得根据后端的数据调整，也不是很灵活，但是…最近后端调整了数据，发现好多路由没有匹配到，都跳转到了一个重定向/redirect页面，所以最终还是决定动手研究动态路由！

1.将router/index.js写死的路由注释掉（或者删除）

2. 新建asyncRouter.js用来根据菜单提取路由表，菜单结构如图：

name -> componentName

path -> url

component -> 由上级菜单的componentName加上本级菜单的componentName组成文件路径

meta的title -> menuName

具体代码：

/*
 * @Author: Wushiqi
 * @Descripttion: 获取路由：遍历传入的菜单列表，拿取拼接路由所需的数据（path、name、title、component）
 * @Date: 2020-0

最低0.47元/天解锁文章

200万优质内容无限畅学