Question

我遇到了vue-router的问题。
我在主页上找到了一个帖子列表。当我单击其中之一时，它会重定向到帖子页面，例如：

<router-link :to="{ name: 'article', params: {id: article.id, slug: article.slug } }"></router-link>

一切正常，我可以在吸气剂中使用this.$route.params.id检索正确文章的数据。

我的问题：当我在文章页面上重新加载时，this.$route.params.id是未定义的，这会导致整个应用程序崩溃。

尽管页面重新加载，如何保存router.params？

Answer 1

我在路由器中传递 url 时遇到了同样的问题

/article/:id/:slug

刷新后不会丢失参数，因为刷新时 vue 只会从 url 中获取数据而忘记是否传递了参数

Answer 2

您正在使用什么后端？您需要enable history mode on your router，并在后端Web服务器上进行一些其他配置更改。 Please refer to this link for the additional server side configuration changes，您需要使其正常工作。

此外，在使用history mode时使用please make note of this 404 caveat。

编辑： ，您可以尝试something like this，因为该ID在URL中保持不变：从 MIKE AXLE寻找解决方案< / em>

我不知道是否有人遇到相同的问题，但是我在刷新时获取路由参数时遇到了问题。我试图获取的route参数是一个ID号，我使用该ID来获取数据并填充页面。刷新时，我发现（通过许多控制台日志），该数字变成了字符串，这就是页面无法正常工作的原因。我整理了一下，但在使用ID之前将其转换为数字：

Number（$ route.params.id）

Answer 3

我不确定您的路线定义是什么，问题可能是路线URL中仅显示了一个参数（例如/article/:slug）。

调用路由时（通过单击router-link或调用router.push），您将直接传递这两个参数，它们将保留在内存中。这就是为什么两者都可以访问的原因。但是，当您重新加载页面时-Vue可以做的所有事情就是解析您的URL。表示仅解析一个参数，因为仅存在一个参数。

作为解决方案，您可以：

在路由URL中使用这两个参数（例如/article/:id/:slug）；
或使用一个参数并调用您的API来检索剩余信息（例如，如果您的路线为id，则通过slug获取/article/:slug）。

Answer 4

您也可以使用query代替参数

<router-link :to="{ name: 'article', query: {id: article.id, slug: article.slug } }"></router-link>

并在重定向页面上获得价值

this.$route.query

页面刷新时丢失router.params

4 个答案: