问题标签 [vue-router4]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
514 浏览

javascript - VUE 3 停用时强制卸载

keep-alive我有使用路由器中的方法的VUE 应用程序。许多页面只需要加载一次,但某些特定页面需要在每次激活时再次加载。

我想要做的是缓存中unmount的页面组件,keep-alive当它是deactivated.

你认为最好的做法是什么?

0 投票
1 回答
183 浏览

typescript - 声明 vue-router 元的类型

在我的文章router.ts中,我添加了一些具有“getter”的元属性,然后我有兴趣在加载该组件时使用。

当组件加载时,我检索该信息,如下所示:

但是,Typescript 给了我以下错误:

类型“未知”不能用作索引类型。

我对 Typescript 很陌生,所以这可能是我忽略的东西,但我无法弄清楚如何解决这个问题。

任何帮助表示赞赏。

0 投票
1 回答
167 浏览

javascript - Vue3:嵌套路由和动态布局组件

嗨 Vue 爱好者们,我一直在开发一个多租户应用程序,但遇到了动态布局问题。

要求:从公共文件夹加载特定于租户的 layout.vue 文件并环绕<router-view>它。

尝试了一些类似dynamic imports的东西,defineAsyncComponent但无法让它工作。

我在浏览器控制台中收到以下错误: 在此处输入图像描述

0 投票
1 回答
1641 浏览

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

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

我遇到的问题是,在首次加载主页时返回 404,即使已在created()应用程序的生命周期内添加了路由。我知道这个问题是导航是在创建应用程序之前触发的,因此这就是为什么在应用程序上导航时导航会自行解决。

在我的更大规模的应用程序中,返回的错误是(由于定义了 Not Found 页面,因此未在 Sandbox 上显示):

请不要提供包括在初始化 VueRouter 时添加路由的解决方案,因为我特别需要在created()应用程序的生命周期中添加它们,因为我将接收的数据将来自 API,我需要在那里处理它。

我试过使用导航守卫,但我还没有设法解决这个问题。

让我知道我做错了什么以及如何解决这个问题。任何帮助是极大的赞赏。

提前致谢。

大家好。:)

0 投票
1 回答
305 浏览

vuejs2 - 带有 vue-router 和 CDN 的 VueJS 3 路由

过去三个小时左右,我一直在尝试将VueJS 2 + vue-router + CDN 项目转换为VueJS 3。到目前为止,我还无法使其工作。VueJS 2 版本运行良好。VueJS 3 版本是行不通的。我知道迟早一个项目需要用 CLI 来实现,但我现在更愿意使用 CDN,因为我还在试验。

我收到的错误消息是:Uncaught ReferenceError: createRouter is not defined。在我的试炼和磨难中,我接受了许多其他人。

这是 JS 部分(VueJS 2,工作正常):

HTML 看起来像这样(VueJS 2,工作正常):

这是我将此代码转换为 VueJS 3 的尝试(不起作用 - Uncaught ReferenceError: createRouter is not defined):

0 投票
1 回答
159 浏览

vue.js - 每次在 Vue Router 4 中访问路由时,如何刷新路由?

我已经设置了一个route应该vue-router 4根据component用户是否登录动态加载的。我是这样做的(可能有更好的方法?):

App.vue文件是这样的:

问题是,如果用户从主页路由登录,路径为'/',他不会离开该路由。相反,我vue-router只想加载Personal组件。

Personal和之间的切换Public似乎只有在我用力刷新页面时才有效,否则不会发生任何变化。因此,如果用户登录,他们仍然会看到该Public.vue组件,然后在页面刷新后他们会看到该Personal.vue组件。如果他们随后注销,他们仍然会看到该Personal.vue组件,直到他们刷新页面。

如何强制 vue-router 在登录/注销后分析路由并加载正确的组件?

0 投票
0 回答
143 浏览

vue.js - 为什么路由器链接在 App.vue 中工作但在组件中给我“无法解析组件:路由器链接”?

我正在尝试设置 vue-router;在我的顶级 App.vue 中,我有

它工作正常。

我想将这些链接包含在一个组件中,但这给了我一个错误

任何指向我应该在哪里寻找答案的指针?我已阅读 API 文档,但它没有对我的组件文件中所需的任何文件或导入进行任何引用。TIA

0 投票
1 回答
33 浏览

vue.js - vueJS 3.x:在 HTML 表单提交后从页面导航

版本:

像 vueJS 这样的 SPA 框架的一个优点是它们在网络消耗方面提供了一些效率(即,通过将 UI/UX 资产批量交付给客户端来减少服务器命中,并希望最大限度地减少服务器请求)。但是我遇到了相反的情况:即,我需要重新访问服务器才能在 vueJS 组件/视图之间导航。这似乎与 SPA 精神高度矛盾,我怀疑在我的设置中某些简单的东西一定是错误的。详情如下。

router/index.js

然后在Car.vue组件中,我有一个表单提交处理程序,如下所示:

我没有使用window.location.href,而是尝试使用:

但这没有任何效果。也就是说,浏览器地址栏中的 URL 以类似的形式开始http://localhost:8080/myapp/,并且在 router-push 之后保持这种方式。

我还尝试推向其他路线,例如About;在这种情况下,浏览器地址栏正确切换到http://localhost:8080/myapp/about,但页面内容保持不变!

显然,这不可能是正确的行为。

你能建议如何解决这个问题吗?

0 投票
1 回答
236 浏览

typescript - Vue Global Route Guard 使用 beforeEach 不会触发

我有一个路由守卫,在使用每个路由调用它beforeEnter时可以工作,但在使用.beforeEach

在顶部的代码中,您可以看到调用/dashboard重定向时有效的示例。

但是,如果我尝试在代码底部的所有路由上全局调用它,则使用beforeEach它什么也不做。

我究竟做错了什么?

PS 我正在使用 TypeScript。

0 投票
1 回答
134 浏览

javascript - 如何使用 vue-router 从父路由继承 props

我有以下路由器配置,并希望将id路由main.parent转换为整数,然后传递给props: true所有子组件的子组件(给定)。

但是,似乎路由函数只真正调用一次(在评估时/:id),而不是在/:id/details评估时。vue-router 中的相关代码似乎证实了这一点。

我想知道是否有人试图解决同样的问题以及他们想出了什么解决方案。理想情况下,我想避免为每条子路线重复道具功能。