未找到与路径匹配的位置 - Vue 3 + Vue Router 4

Question

我需要在 Vue 应用程序中动态创建路由。我已经在此代码沙箱上创建了一个基本组件link。

我遇到的问题是，首次加载时主页返回 404，即使该路线已添加到应用程序的

created()

生命周期内。我知道问题在于导航是在创建应用程序之前触发的，因此这就是为什么在应用程序上导航时导航会自行解决。

在我的大规模应用程序中，返回的错误是（未在沙盒上显示，因为定义了“未找到”页面）：

[Vue Router warn]: No match found for location with path "/"

请不要提供包括在初始化 VueRouter 时添加路由的解决方案，因为我特别需要将它们添加到应用程序的

created()

生命周期中，因为我将接收的数据将来自 API，并且我需要处理它在那里。

我尝试过使用导航守卫，但到目前为止我还没有解决这个问题。

请让我知道我做错了什么以及如何解决这个问题。非常感谢任何帮助。

提前致谢。

祝大家有美好的一天。 :)

Answer 1

添加路由后需要触发新的导航：https://next.router.vuejs.org/guide/advanced/dynamic-routing.html#adding-routes

Answer 2

当我尝试生成动态路由时，我也遇到了这个问题，我发现的是 当输入路线时我还没有注册就会出现这个错误，所以你需要注册一个404页面来等待我们的路线注册

希望能帮到你

Answer 3

我在导入字体时遇到这个问题

Answer 4

在 /router/index.js 中，请在 const router 声明后添加以下代码：

router.addRoute('admin', { path: 'settings', component: AdminSettings })

这里您可以将“admin”替换为您自己的父路径；
将“设置”设置为子路径；
并将该组件作为您想要的子组件。

刷新页面，然后您可以看到组件 AdminSettings，其 URL 如下： localhost:5713/admin/settings 。

希望这有帮助。 https://router.vuejs.org/guide/advanced/dynamic-routing.html#adding-nested-routes

Answer 5

我认为您需要在页面更改时将完整路径存储在路由器防护的本地存储中，然后在创建应用程序时获取此路径进行重定向。