问题标签 [vue-router4]

包.json：

vite.myconfig.js

我的路由器脚本

这个错误：

这为什么？

当我这样填写component字段时createRouter()：

好像它不起作用。我希望它在实际页面加载时显示加载页面。

我怎么做？

我正在尝试将 Vue 2.x 应用程序迁移到 Vue 3.x。不幸的是，在过去的两天里，我一直在努力寻找这个简单问题的有效解决方案：

我的应用程序适用于移动设备，在屏幕顶部，我有一个顶部栏，左侧和右侧有 2 个上下文按钮。<router-view/>这些按钮触发与我加载并托管在其中的视图相关的方法。

按照这篇文章的建议，我的 Vue 2 应用程序运行良好：

[Vue 2] App.vue

存储在我的路线元数据中的方法名称和可选参数：

[Vue 2] 路由器.js

在 Vue 2 中，我可以通过以下方式访问路由器视图实例： this.$refs.routerView

不幸的是，它不再适用于 Vue 3 ！

在花了很多时间之后，我还没有找到一种正确的方法来访问我加载的子实例 <router-view/>以触发我在其中托管的方法。

[Vue 3] 这不起作用：

简而言之，如何使用 Vue 3 访问在路由器视图中加载的子组件实例？

对此的任何帮助将不胜感激。

我浏览了这个有点相关的vue-router@4.05 对象参数。在该线程中提到了这个https://github.com/vuejs/vue-router-next/issues/494，但我仍然很困惑。

我还尝试使用路由器链接组件的:to属性传递一些数据。我做了两支笔来展示这个问题：

笔 1成功传递了在路线定义中定义的对象。

Pen 2试图传递一个动态对象，而不是实际对象，它得到一个带有 [Object object] 的字符串，如 github 问题中所述。

控制台输出：

[Vue 警告]：无效的道具：道具“存储库”的类型检查失败。预期的对象，得到具有>值“[对象对象]”的字符串。at <Repository repository="[object Object]" onVnodeUnmounted=fn ref=Ref > at at at at

所以，如果我明白这一点，最终你不能传递一个动态对象，因为它被解析了，但你可以传递一个静态对象？

我已经尝试过 props: true 和一切，我正在尝试功能模式解决方案作为更复杂的示例

片段：

v1

v2

目前，我已将所有 vue 文件放在名为“views”（项目名称/src/views）的文件夹中，除了位于下一级的 Home.vue 页面（项目名称/src/views/seyal/Home.vue）。以下路由器配置工作 -

路由器.js

上面的路由器配置适用于路径中存在的所有文件（projectname/src/views）。但我注意到的一件事是，每当我路由到路径中存在的 home.vue 页面时（projectname/src/views/ seyal），然后如果我尝试路由到直接存在于视图文件夹（项目名称/src/views）中的其他 vue 页面，那么在这种情况下我无法这样做。为什么会发生这种情况？我还注意到，如果我首先访问 seyal 主页，然后如果我尝试访问其他页面，那么在浏览器 url 中，seyal 部分仍然存在于 url 中。例如 - localhost/seyal/jobData 而不仅仅是localhost/jobData.为什么 seyal 部分仍然出现在此处的 url 中？请帮助！

我的项目中有src/route/router.js：

我可以在我的代码中放置一个断点，它会在页面加载时触发它。

在App.vue中，我渲染了Header.vue组件：

header 组件链接到其他非 vue 页面，但在标记为 useRouter 的元素上，它呈现如下链接：

在同一个 Header.vue 中包含在其模板中：

我在Header.vue文件中有以下导入：

单击链接时，两个组件都不会加载到路由器中。单击时，该 url 不会随哈希标签而变化。但即使手动编辑 url 以匹配路由也不起作用。

当它们直接加载到页面上时，这两个组件都可以工作。即使单击应路由的元素，页面上也不会出现 JavaScript 错误。

我在使用 vue 3 (vue-cli) 和 vue-router 4 在我的应用程序中登录用户时遇到一些问题

这是 router.js

我在路由中导入商店以访问经过身份验证的状态。当服务器对用户进行身份验证时，则身份验证 = true。

经过身份验证的（来自 vuex 的状态）......现在是真的......但它保持在登录表单。如果我强制进入/（仪表板），它会再次返回登录。

用户已登录。

任何人都知道我在 routes.js 中缺少什么？？？

***** 更新 *****

登录组件

有谁知道我为什么收到这个警告？

[Vue路由器警告]：启动路由器时出现意外错误：错误：缺少必需的参数“catchAll”

当我在任何点上随机从一个组件移动到另一个组件时，vue 会出现此错误，然后我无法移动另一个组件。

此错误不在任何特定组件上，它可能在任何地方发生。

错误

这是我的路由器 index.js 文件

这就是我在组件中使用链接路由器的方式

可能是什么原因？我们如何解决它？

在带有路由器 4 的 vue 3 中，该类router-link-active不再为我工作。如果您与 一起在同一页面上，则该类出现router-link-exact-active，但不在任何子页面上。

例如链接<router-link :to="{ name: 'test'}">test</router-link>获取的类router-link-active和/test但它们都没有在router-link-exact-active/ test/2

真实示例： https ://codesandbox.io/s/vue-router-4-reproduction-forked-zcb7y

谢谢，对于任何想法或建议