刷新页面后vue页面打不开

Question

我将路由动态添加到路由器，我可以使用路由器视图访问所有页面。但是，当我尝试刷新页面时，尽管 URL 相同，但我无法再次访问该页面。它是 http://localhost:8081/me。

this.$router.addRoute("Main", {
              path: '/me',
              name: 'Me',
              component: () => import(`@/components/Me.vue`)
            });

正如我所说，我可以正常访问页面“我”，但是当我刷新它时，我看不到它的内容并显示警告：

[Vue Router 警告]：找不到路径为“/me”的位置的匹配项

我在阅读 the cause of the error 后尝试使用 createWebHistory("/") 创建路由器，但似乎没有任何改变。我将不胜感激。

Answer 1

出现这种情况有两个原因。

来自服务器的第一个服务 SPA 应用程序。

确保您的后端设置为为所有路由提供 index.html 文件，因为后端服务器不知道客户端路由器设置的路由。 express-history-api-fallback-middleware 之类的东西可以帮助使用 Node.js/Express.js。

第二个问题是使用 addRoute。

正如您所描述的，问题可能是 Vue 路由器在 components/common/LeftMenu.vue 中的代码执行之前就做出了路由决策，该代码负责调用 addRoute()。确保在做出路由决定之前调用此代码。最好的方法是在顶级应用程序组件中移动这个逻辑。而且，如果您可以将其移至顶级组件，则意味着您可以在定义路由器时尝试声明所有路由。

为什么要这样做？

使用 addRoute 不一定是反模式，但不得不依赖 addRoute 通常是代码异味。在极其罕见的情况下，您真的会需要它。路由是您的应用程序的高级架构问题，因此最好在应用程序初始化之前在顶层模块的某处预先声明。低级组件不应试图操纵路由数据结构（违反 DIP 原则）。

您可能倾向于使用 addRoute 的一种情况是，在组件进行一些数据操作并添加一些 API 调用之后做出决定。这似乎是合理的需求，但随后有更好的方法来解决这个问题。考虑使用路由守卫（守卫也支持异步解析！）并防止用户进入视图，直到守卫成功解析。