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

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

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

场景：后台管理系统的权限控制是通过设置权限规则实现的。

解决方案：检查权限控制逻辑，确保动态添加的路由权限设置正确。

问题描述

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

场景

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