Vue.js 刷新页面后无法打开Vue页面

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

http://localhost:8081/me

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

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

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

---

阅读后，我尝试使用

createWebHistory（“/”

创建路由器，但似乎没有任何变化。我将感谢任何帮助。

发生这种情况的原因有两个

首先从服务器提供SPA应用程序。 确保您的后端设置为为为所有路由提供

index.html

文件，因为后端服务器不知道客户端路由器设置的路由。类似can-help的东西是使用Node.js/Express.js

第二个问题是使用

addRoute

。 正如您所描述的，问题可能是Vue路由器在执行

组件/common/LeftMenu中的代码之前做出路由决定。Vue

将负责调用

addRoute（）

。确保在做出路由决定之前调用此代码。最好的方法是在顶级应用程序组件中移动此逻辑。而且，如果您可以将其移动到顶级组件，这意味着您可以在定义路由器时尝试声明所有路由

为什么要这样做

使用

addRoute

不一定是一种反模式，但必须依赖

addRoute

通常是一种代码气味。在极为罕见的情况下，您确实需要它。路由是应用程序的高级架构问题，因此最好在应用程序初始化之前在顶级模块的某个位置预先声明路由。低级组件不应试图操纵路由数据结构（违反DIP原则）

---

您可能会尝试使用

addRoute

的一种情况是，在组件进行一些数据操作并添加一些API调用之后，您会做出决定。这似乎是合理的需要，但要解决这个问题，还有更好的办法。考虑使用路由防护装置（防护装置也支持异步解析！），并防止用户进入视图，直到防护装置成功解析。

在哪里添加路由？理想情况下，路由器创建和路由声明是一次性引导活动。您不需要使用

addRoute

方法，除非是在极少数情况下。这可能是当您刷新此特定代码段时未执行导致不匹配错误的原因。初始化路由器时预先声明所有路由。@shob我在router/index.js中创建路由器，但在components/common/LeftMenu.vue中添加新路由器。@HarshalPatil我在初始化路由器时声明路由，但我还想添加新路由。那么您认为我不能使用其他组件来添加更多路由吗？但我想动态添加新路由。谢谢，路由器导航卫士解决了这个问题。