刷新页面后vue页面打不开答案

【问题标题】：Vue page cannot open after refreshing the page刷新页面后vue页面打不开
【发布时间】：2021-06-05 07:01:05
【问题描述】：

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

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

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

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

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

【问题讨论】：

在哪里添加路由？
理想情况下，路由器创建和路由声明是一次性引导活动。您不需要使用addRoute 方法，除非在极少数情况下。这可能是当您刷新这段特定代码时未执行导致 No Match 错误的原因。初始化路由器时预先声明所有路由。
@shob 我在 router/index.js 中创建了路由器，但我在 components/common/LeftMenu.vue 中添加了新路由器。
@HarshalPatil 我在初始化路由器时声明了路由，但我还想添加新路由。那么你认为我不能使用另一个组件来添加更多路线吗？但我想动态添加新路线。

标签： vue.js vue-router vuejs3

【解决方案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 调用后做出决定。这似乎是合理的需要，但随后要解决有更好的方法。考虑使用路由守卫（守卫也支持异步解析！）并阻止用户进入视图，直到守卫成功解决。

【讨论】：

谢谢，路由器导航卫士解决了这个问题。
@selubamih 你解决问题了吗？你能提供解决方案吗，我在这里遇到同样的问题，我不知道如何解决它：stackoverflow.com/questions/69112290/…

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

第二个问题是使用addRoute。

第二个问题是使用`addRoute`。