问题标签 [vue-router4]

我有带有 vue3 和 vue-router4 以及 laravel-mix6 webpack-mix 的 laravel 6 项目。我处理来自 laravel 的前缀部分，然后使用 vue-routes 处理同一模块的页面之间的路由，一旦升级到 vue 3，它就可以在 vue 2 上正常工作，例如：

• -当我去 http://localhost:8000/prefix# ->它工作正常。
• - 当我去 http://localhost:8000/prefix#/pageX ->404 not found 。
• - 当我在邮件页面添加并单击它时 -> 它路由到正确的组件但错误的 url http://localhost:8000/pageX 删除了前缀。我尝试使用 base / publicPath 属性但仍然无法正常工作

我有一个侧边栏，您可以在下面看到：

因此，当单击侧边栏中的链接时，路线将更改为“http://.../my-account/profile”或“http://.../my-account/my-tickets”。但问题是 currentIndex 因此没有改变，内容没有改变，而且我也无法将活动类添加到链接中。那么您认为我可以如何根据路线更改 currentIndex。如果我触发一个事件，你能帮我解决这个问题吗，因为我不知道如何在 Vue 中执行它。我尝试编写一个类似 checkRouter() 的函数，但没有成功。为什么你认为它正在发生？所有解决方案将不胜感激。

当我单击该 taskId 时，我正在尝试呈现特定的 id。现在，当我单击它时，它会将我带到路线/tasks/details/id#并显示 URL 中的特定 ID，但详细信息页面显示所有任务而不是我想查看的特定任务。我非常感谢您抽出宝贵时间对此进行审查，并在此先感谢您。

在 Vuex 中： 从“vuex”导入 { createStore }；

},

在任务列表页面中：

ITEMSLIST组件：（将 props 传递给 TaskList 的组件）

最后，TaskDetails页面（将使用从 state.$store 来自 VUEX 的道具传递的 id 显示详细信息：

我<router-link>在组件中有一个，我想去创建帐户页面，然后重新加载页面。但作为默认行为，它不会在进入页面后重新加载页面。

代码是：

我一直在尝试修复这个 vue-router 警告，但没有成功：

从“/”到“/”时，在一个导航守卫中多次调用“下一个”回调。它应该在每个导航守卫中准确调用一次。这将在生产中失败。

我已经阅读了官方文档（https://next.router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards），但是在进行建议的更改时，我不断获得无限的下一个循环，所以我我显然做错了什么。

我想做的是：让未经身份验证的用户只能导航到“/”路线。如果他们尝试进入受保护的路线，则会被重定向到“/”。让经过身份验证的用户直接登陆“/mapping”并跳过“/”路线。然后他们可以导航到任何受保护的路线。

我用“let user = projectAuth.currentUser”验证身份验证。

提前感谢您的提示

是否可以使用 Vue Router 为通过 for 循环添加的组件创建内部导航？

我可以使用内部状态变量和一堆 v-if 语句来显示所需的视图，但是能够为组件定义内部路由以使用 vue-router 控制视图状态会很好。

我尝试添加一个新的路由器，createRouter()但我不知道如何use为组件添加路由器（如createApp().use(mainRouter);）

主路由器的应用程序视图

控制板

编辑 1

这种骇人听闻的废话非常接近：

• 添加:name="id"到<router-view>
• 与组件对象一起使用addRoute，键为id

这使我可以转到 /home/0/content，这会将ContentView组件添加到面板中。但是，正如@jeremy castelli 所建议的那样，我一次只能这样做Panel一次。因此，如果我转到/home/0/content，面板 0 将显示内容。如果我去/home/1/content，面板 0 将停止显示内容，面板 1 将显示它 - 不是我所追求的

编辑2：

最终，我放弃了这个项目的这个想法，并回到一个反应state字符串和一系列视图组件v-if="state === 'this-state'"来管理它们。如果我找到更好的方法，我可能会回去重构

编辑 3（最终）

建议将每个子组件放入一个<iframe>中，以便它们每个都有一个单独的 URL。

这将要求面板是一个单独的应用程序，但这基本上就是这样做的

在向其中一个路由添加参数后，所有其他都停止正确渲染（即路由器视图根本不起作用）。路线/download/:id按预期工作......我在设置中遗漏了什么吗？我尝试在没有参数的情况下离开和删除/download路径，但它没有任何改变......我也尝试浏览文档，但我找不到他们遇到这种情况的例子（要么像这样工作，要么他们更经常只使用一条路线在示例中）

路由器/index.ts：

main.ts：

应用程序.vue：

主页.vue：

版本：

• Vue：“^3.2.4”
• Vue路由器：“4.0.12”
• vue-test-utils：“^2.0.0-rc.15”
• 打字稿：^4.3.4
• ts-jest：ts-jest^27.1.3

开玩笑配置转换：

我不确定这是否是我的代码造成的，但我在网上看不到任何东西，所以我认为最好在这里发布。

在我的测试套件中，我将插件中的商店全局注册到一个文件中，该文件位于开玩笑的 setupFilesAfterEnv 配置中，如下所示：

在我的测试中，我只是在打电话

通过 vue-router 导航，然后调用

在我的测试文件中，第一次测试运行后出现错误。没有错误的第一次测试很好。

错误：

请问有人对此有任何想法吗？

所以我正在尝试在我的网站上实现一项功能。基本上，如果您打开一个模式，路由器会推送（或 .replace()）到别名“/url-opened”，因此如果有人在浏览器中按下后退按钮，它不会转到其他页面，而是转到“/url ”。

我已经在我的 vue 2 项目中使用了这个，但是现在使用 vue 3 它不起作用。

当主页在路径“/”处加载时，两个组件都正确加载，我可以手动向下滚动到副标题部分，这样就可以了。这两个组件都有一个 100vh 类。当我使用“a”标签时，它应该会转到 id，但不会使用路由器链接。

subhead 是 Subheadsection 中 div 的 id。

HeroHeadline 的一个组件中有一个路由链接

我在 scrollBehavior 函数中尝试了很多东西，但似乎没有任何效果。控制台中没有错误或警告。

任何意见，将不胜感激。

路由器文件

主页

英雄主线

HeroHeadline 的一个组件中有一个路由链接

堆栈