问题标签 [vue-router4]

我正在将一个 vuejs2 项目迁移到 vuejs3。在那个项目中，我有两个<router-view>嵌套级别，每个级别都有不同但相似的过渡。

简化第一个路由器级别看起来像在 vue2

在哪里tDir可以获得down-transition或up-transition价值。

第二个（嵌套）级别之一如下所示：

tSide可能在哪里left-transition或right-transition

相关的 CSS 将是这样的：

为了迁移到 vue3，我对 css 类进行了此处指定的必要更正，并修改了此处<router-view>指定的、<keep-alive>和<transition>顺序和结构。同样正如这里所指定的，我为每个组件添加了一个唯一的键，并且我检查了每个要渲染的组件是单根的（它们已经是单根的，因为它们来自 vue2）。$route.name

关键是在前两个链接中进行修改后，第一级的过渡在第一次尝试时就起作用了，但是我从来没有能够使内部级别像以前一样工作，而且我的行为很奇怪。

使用这样的代码（固定转换名称以便left-transition于调试）：

从Component A（默认渲染）到 时Component B，Component A在稳定的过渡之后平滑离开，但Component B在过渡结束时立即出现在适当的位置。返回时，过渡效果很好，Component A进入和Component B离开，都在过渡之后。

如果我注释掉这些<keep-alive>块（比如在正常工作的外部级别中），则转换问题行为不会改变。但是如果我添加mode="out-in"，那么一切都按照 vue2 的预期工作，除了它们不是同时发生（显然），但在各个方向上的过渡都是平滑的。如果我切换到mode="in-out"，那么当从A到时B，A会在原地等待片刻，同时B应该出现（但它没有），然后A按预期消失，最后B在过渡结束时立即出现。回到模式时，B一切都按预期工作in-out。

对我来说这很奇怪，我不知道在哪里或如何继续这个问题。似乎过渡无法成功应用于Component B，但它只发生在一个方向上。当mode="out-in". Component A当它已经存在时，可以转换为不应用于其他组件的转换。

最后一句话可能更有意义，因为在实际应用中不仅有Component BbutComponent B和Component C。A可以去B或C，B而且C只能去A。A-B-A使用和观察到的行为相同A-C-A。但是 没有什么特别的Component A，它的根是一个 flex div，B和. 一样C。

控制台中没有警告或错误。请询问您需要的任何额外信息，我会很乐意编辑问题。

谢谢你的时间。

我正在尝试使用 Vue 3 + Vue Router 4 + TypeScript设置全局路由防护。

在 Global Route Guard 内部，我正在调用 Auth0 插件。

但 TypeScript 显示错误The 'this' context of type 'Auth0Plugin' is not assignable to method's 'this' of type 'undefined'. ts(2684)。

此错误消息使我无所适从。

这是完整的仓库，我复制了index.ts下面的路由器文件：

这是 Auth0 插件：

我通过遵循之前不同但类似问题的答案解决了这个问题。

我删除了 的所有实例NavigationGuardWithThis<undefined>并将其替换NavigationGuard为 ，如下所示。

此解决方案有效。

但我不明白为什么它会起作用。

谁能解释这里发生了什么？

使用更新的代码NavigationGuard：

在这个项目中，我使用 Vue 3 (vite) 和 Vue-router v4 并尝试使路由正常工作。

我正在尝试导航到，/escape-rooms/my-escape-room但<router-link>我的菜单中的对象没有获得类.router-link-active。在主要路线/escape-rooms中确实如此。我不确定我做错了什么，因为文档指出嵌套路由会自动“激活”此类的任何父链接。

我有这个路线列表：

这是我的菜单布局的一部分：

首先，对不起我的英语不好。我正在学习 vue 中的模块化架构/按功能划分的文件夹，就像这样 在用户模块中输入图像描述 在用户模块中我创建了一个这样 的路由器，在此处输入图像描述 并将用户的路由器添加到主路由器，像这样 在此处输入图像描述 Builder 路由器是我的用户登录后应用程序路由。我的主路由器就像这样 在此处输入图像描述 发生的事情是当我访问/dashboard或/about或其他定义主路由器的页面时一切正常。然后我单击/user路由器（它来自用户的模块路由器），它也可以正常工作。但是当我/dashboard再次访问时。路由器视图什么也不显示（它<!-- -->在开发控制台中）。

1. 访问仪表板时就可以了。显示的页面（白框） 在此处输入图像描述
2. 在用户模块路由器中也可以在 此处输入图像描述
3. /dashboard当我再次 访问时它变成空白在此处输入图像描述 路由器视图的结构

这是我的主路由器

2. 注册路线

3. 用户模块路由

额外说明：我也在使用 webpack，以防它影响我的问题

请提供任何帮助。先感谢您。

我在导航栏中有一个链接，它指向一个页面（一个新组件加载到主而不是导航栏中）

我希望一旦在这个页面上，这个相同的链接就会回到第一页。

我试过这个：

但它不起作用。有人有想法吗？

天，

我写了一个脚本来登录，在脚本结束时我想重定向到一个新视图（url：http://mywebsite/Home）我有这个脚本来登录：（文件：./component/log. vue)

但看起来“推送”有错误所以我阅读了以下文档：https ://next.router.vuejs.org/ 并尝试了一些东西，但没有任何效果。

我有这个错误：

你能告诉我为什么吗？

我使用新版本，所以：Vue 3 with TS、Router V4 等。

感谢您的帮助。

我有一个带有嵌套子路由的父路由。

router-view父路由（子加载到）中的transition. 我的理解是，这应该在进入/离开路线时让孩子进出。

默认情况下不会发生任何转换。向过渡添加一个appear道具可以修复进入过渡，但不能修复离开。

这是特定于它是嵌套路由的事实吗？如果是这样，是否有解决它的最佳实践？

这是一个简化的测试用例：https ://stackblitz.com/edit/vue-y6bbb6?file=src%2Fviews%2FParent.vue – 单击页面顶部的“子”和“父”链接。

我想使用 vue 3 和 vue-router 4 创建自己的查询编码/解码。我尝试像这样使用 parseQuery/stringify：

但是 myDecoder 和 myEncoder 函数永远不会被调用。它是一个错误吗？有人用过这些功能吗？

嗨，漂亮的 Vuejs 开发人员！ 我在动态路由许多 Vue 组件/页面时遇到了一点问题。在这种情况下，我使用嵌套路由来为我的布局组件设置几条路由，为我的页面设置数百条子路由，正如您可以想象的那样，我必须静态或手动输入许多子路由，然后在我添加更多路由时添加在未来的代码更改中需要更多子路由，但我需要一个解决方案来简化/解决这个问题，以更有效/更好的方式，比如在 url 布局后添加用户类型的路由......这是我的示例代码代码：

正如您在这段代码中看到的那样，我有一个名为 Student 的布局，它有两个孩子，但我必须为此布局手动输入数百个子路由，其他布局有什么方法可以使用用户输入的内容动态设置这些路由/student/dashboard 或 /layout/page 之类的布局名称并将其与组件名称匹配？我的意思是像 Angular 中的参数一样，我可以在路由器内部使用参数值本身来表示吗？

让我知道是否有解决此问题的有效方法。提前致谢！

我现在在第二个项目中遇到了这个问题，所以这不是一个情境错误。

我这样使用路由器：

在这个特定的项目中，这是一个使用 Vuex 等的分步入职过程。您停留在页面上，填写一些表格并按下一个执行一些异步调用的按钮，然后this.$router.push({name: 'AnotherRoute'});

然而：

当我尝试执行以下操作之一时 - 有一些代码mounted或created检查某些内容并将路由器推送到另一条路由，URL 会更改，但组件实际上从未加载 - 只有一个空白屏幕。

新 Route的createdor mountedwebhook 永远不会执行。如果我刷新页面，新路由的组件就在那里。

如果我删除过渡或将其设为 an in-out，即使使用 fast ，它也会再次开始工作push。所以问题出在某个地方。

看起来路由器推送发生得太早了。在我将路由器推送到另一条路线之前，我需要做些什么吗？