blocks|key|1514526|text|你用的是什么后端？您需要在你的路由器上，以及在后端web服务器上进行一些额外的配置更改。有关其他服务器端配置更改，请参阅此链接。，您需要使它正常工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1514527|同时，请注意这404条警告在使用history+mode时。|style|CODE|1514528|编辑：您可以尝试像这样的东西，因为ID在URL：中保持持久化，可以从+MIKE+查找解决方案。|BOLD|1514529|如果面临同样的问题，我不知道是否还有其他人，但我在刷新路径时遇到了问题。我试图获得的路由参数是一个ID号，我使用该ID来获取数据并填充页面。当我刷新时(通过许多控制台日志)，我发现这个数字正在变成一个字符串，这就是为什么页面不能工作的原因。我将其分类，但在使用之前将ID转换为数字：
号码($route.params.id)|blockquote|1514530|entityMap|0|LINK|mutability|MUTABLE|url|https://router.vuejs.org/guide/essentials/history-mode.html|1|https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations|2|https://router.vuejs.org/guide/essentials/history-mode.html#caveat|3|https://stackoverflow.com/questions/39950582/vue-router-route-with-params-not-working-on-page-reload^0|C|7|0|18|K|1|0|G|C|3|A|2|0|0|3|O|A|Z|5|8|6|3|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]|$A|15|B|16|1|17]]|C|$]]|$1|D|3|E|5|6|7|18|8|@$A|19|B|1A|F|G]]|9|@$A|1B|B|1C|1|1D]]|C|$]]|$1|H|3|I|5|6|7|1E|8|@$A|1F|B|1G|F|J]|$A|1H|B|1I|F|J]|$A|1J|B|1K|F|J]]|9|@$A|1L|B|1M|1|1N]]|C|$]]|$1|K|3|L|5|M|7|1O|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|1P|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]|V|$5|Q|R|S|C|$T|W]]|X|$5|Q|R|S|C|$T|Y]]|Z|$5|Q|R|S|C|$T|10]]]]

What backend are you using? You need to <a href="https://router.vuejs.org/guide/essentials/history-mode.html" rel="nofollow noreferrer">enable <code>history mode</code> on your router</a>, as well as make some additional configuration changes on your backend web server. <a href="https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations" rel="nofollow noreferrer">Please refer to this link for the additional server side configuration changes</a> you will need to make for this to work properly.
Also, <a href="https://router.vuejs.org/guide/essentials/history-mode.html#caveat" rel="nofollow noreferrer">please make note of this 404 caveat</a> when using <code>history mode</code>..
Edit: you could try <a href="https://stackoverflow.com/questions/39950582/vue-router-route-with-params-not-working-on-page-reload">something like this</a> since the ID remains persistent in the URL: Look for the solution from MIKE AXLE
<blockquote>
I don't know if anyone else if facing the same issue, but I was having a problem getting route params on refresh. The route parameter I was trying to get was an ID number and I use that ID to fetch data and populate the page. I found (through many console logs) when I refreshed, the number was turning into a string and thats why the page was not working. I sorted it out but casting the ID to number before using it:
Number($route.params.id)
</blockquote>

blocks|key|64390|text|我不知道您的路由定义是什么，问题可能是只有路由URL中的一个参数(例如/article/:slug)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|64391|当您调用一个路由时(通过单击router-link或调用router.push)，您将直接传递这两个参数并将它们保存在内存中。这就是为什么两者都可以接近的原因。但是当您重新加载页面时，Vue所能做的一切都是解析您的URL。意味着只解析了一个param，因为只有一个param存在。|64392|作为解决办法，您可以：|64393|在路由URL中使用两个参数(例如，/article/:id/:slug)；|unordered-list-item|64394|或者使用一个参数并调用您的API来检索剩余的信息(例如，如果您的路由是id，则通过段塞获取/article/:slug)。|64395|entityMap^0|Z|E|0|E|B|S|B|0|0|H|I|0|Z|2|19|E|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|Y|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|M|3|N|5|L|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|P|$]]

I'm not sure what is your route definition, the problem can be that only one of the params presented in the route URL (e.g. <code>/article/:slug</code>).

When you invoke a route (by clicking on <code>router-link</code> or calling <code>router.push</code>), you passing both params directly and they persist in the memory. That's why both are accessible.
But when you reload the page - everything that Vue can do is to parse your URL.
Means only one param parsed because only one param is present.

As a solution you can:

<ul>
<li>use both params in the route URL (e.g. <code>/article/:id/:slug</code>);</li>
<li>or use one param and call your API to retrieve remaining information (e.g. get <code>id</code> by slug if your route is <code>/article/:slug</code>).</li>
</ul>

blocks|key|883489|text|您也可以使用query代替params。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|883490|<router-link+:to="{+name:+'article',+query:+{id:+article.id,+slug:+article.slug+}+}"></router-link>|code-block|syntax|javascript|883491|并获得重定向页面的价值。|883492|this.$route.query|883493|entityMap^0|6|5|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

You can also use <code>query</code> instead of params
<pre><code>&lt;router-link :to=&quot;{ name: 'article', query: {id: article.id, slug: article.slug } }&quot;&gt;&lt;/router-link&gt;
</code></pre>
and to get value on redirecting page
<pre><code>this.$route.query
</code></pre>

blocks|key|883517|text|我也有同样的问题，在路由器中传递url。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|883518|/article/:id/:slug|code-block|syntax|javascript|883519|您不会在重新刷新后松开对角，因为当刷新时，vue将只从url获取数据，并忘记是否通过了params。|883520|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I had the same issue pass the url in router
<pre><code>/article/:id/:slug
</code></pre>
you will not loose your params after resfresh because whenrefreshng vue will take only data from url and forget if you passed params

blocks|key|64426|text|你应该这样走：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|64427|{
++++++path:+'/article/:id/:slug',
++++++name:+'article',+
}|code-block|syntax|javascript|64428|在您的视图中，当路由时，可以这样做：|64429|this.$router.push({+name:+'article',+params:+{+id:+articleID,+slug:+articleSlug}});|64430|不客气！|64431|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

You should route like this:
<pre><code>{
 path: '/article/:id/:slug',
 name: 'article', 
}
</code></pre>
In your view when routing do it like this:
<pre><code>this.$router.push({ name: 'article', params: { id: articleID, slug: articleSlug}});
</code></pre>
You're welcome!

I'm encountering an issue with vue-router. 
I got a list of posts in the homepage. When I click on one of them, it redirects to the post page such as :

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

Everything is working perfectly, I can retrieve the data of the correct article using <code>this.$route.params.id</code> in a getter. 

My issue : When I reload on an article page, <code>this.$route.params.id</code> is undefined, which causes the entire application to crash.

How can I save the <code>router.params</code> despite a page reload ?

Losing router.params on page refresh

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我遇到了vue路由器的问题。我在主页上有一张帖子列表。当我单击其中之一时，它会重定向到post页面，例如：<router-link :to="{ name: 'article', params: {id: article.id, slug: article.slug } }"></router-link>一切都很完美，...

问在页面刷新中丢失router.params
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在页面刷新中丢失router.paramsEN