前端动态路由实现与优化-CSDN博客

本文探讨了前端项目中动态路由的使用，特别是在中大型项目中的优势。动态路由避免了因运营人员新增菜单而导致的前端路由表频繁更新的问题。文章详细介绍了动态路由的实现思路，包括全局路由守卫的设置、常规路由与权限路由的处理，以及如何将后端的树状结构路由转换为前端可用的列表结构。同时，针对动态路由可能遇到的登录后路由表为空及页面刷新找不到路径的问题，提出了相应的解决方案。

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

路由分为静态路由和动态路由

静态路由和动态路由的优缺点

静态路由与动态路由优缺点-1.在中大型项目，采用的都是动态路由方式,因为后台导航目录运营人员可能会新增菜单,新增菜单后，前端人员得在路由表填加上，这样导航才能点击才能对应上页面,这样比较麻烦。如果是动态路由，运营人员新增目录后，因为我是动态路由获取永远是最新的路径，一次性通过动态填加的方式加进去,后边就不用管路由的事了,只关心页面就可以了。

动态路由实现思路：

1.在全局路由守卫中，先判断token值有没有。有的话先看是否存储过，如果存储过直接，页面调用渲染，如果没有，就请求接口,把路由表存储下。除非没有token,跳转登录页面

2.路由表里-把那些常规路由(不需要权限的路由，事先都写到路由表里)。把需要权限的路由通过router.addRoute()动态填加到对应的子路由里。

3.动态填加的路由需要处理下。因为后端传给你的是树状结构，前端需要把树结构处理成列表结构(通过递归，不断的获取路径,名字那些信息)，填加到路由表里。

动态路由遇到的问题与解决方式

1.登录后路由表里在次加载一遍动态路由-解决第1次页面点击找不到路径问题,因为路由是动态生成的,登录后路由没有被在次生成，路由表里是空的。所以在路由里要在次生成一遍

2.登录后跳转其它页面,如果刷新，页面找不到问题？原因是路由是动态的，它是在登录后生成的，而其它页面没有在次生成动态路由,所以就找不到。解决办法：可在路由里，在生成一遍动态路由。这样不管在后台哪个页面，一刷新都会先执行。(路由先走)

代码展示

登录页面

//动态路由
getmenus().then(res => {
  //在登录页面，登录请求成功之后，自去请求首页的菜单数据将数据存储到本地   
  localStorage.setItem("list", JSON.stringify(res.data.data));
  //数组: 通过函数将数据传递过去 在通过函数

后台管理动态添加路由