Vue动态添加路由页面刷新后失效，如何解决？

本文共计1049个文字，预计阅读时间需要5分钟。

问题描述：后天在Vue后台管理系统有关权限页面动态添加到路由的功能时，遇到一个问题：动态添加的路由页面，在页面刷新时出现404的情况。

场景：后台管理系统的权限控制是通过控制路由来实现的。

解决方案：后台管理系统的权限控制是通过路由守卫来实现，确保用户有权限访问对应的页面。当动态添加路由时，需要确保新的路由路径正确添加到路由配置中，并且相关权限控制逻辑正确设置。以下是可能的解决步骤：

1. 检查动态添加路由的路径是否正确，确保与后端API接口的路径一致。

2.确认路由守卫逻辑正确，特别是在路由跳转时，是否正确处理了权限验证。

3.检查是否遗漏了路由的注册或权限配置。

4.查看前端请求是否正确，确认请求的URL与后端提供的URL匹配。

5.如果是Vue Router版本问题，检查是否有版本兼容性问题，尝试升级或降级Vue Router版本。

通过以上步骤，可以尝试解决动态添加路由页面刷新时出现404的问题。

问题描述

昨天在做vue后台管理系统有关权限页面动态添加到路由的功能时，遇到一个问题：动态添加的路由页面，在页面刷新时出现了404的情况。

场景

后台管理系统的权限控制是通过在前端页面定义权限code， 把code给后台同学保存配置到表中，之后根据后台返回的权限code列表与前端页面配置的code菜单列表做筛选匹配，code相等的页面就是有权限的页面，再通过router.addRoute()动态添加到路由中，有权限的路由才可以被访问，否则会提示无权限。