route.params are lost

[Deeyu]

Version

4.1.4

Reproduction link

jsfiddle.net/posva/3yq6ojLv

Steps to reproduce

//list component
import { useRouter } from 'vue-router';
const router = useRouter();
router.push({
name: 'detail',
params:{data:'111'}
});
// detail
import { useRoute } from 'vue-router';
const route = useRoute();
// route.params -> {}

What is expected?

route.params -> {data:'111'}

What is actually happening?

route.params -> {}

[posva]

This is mentioned in the changelog: https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22

[YiYiCool]

大佬, 我也遇到这个问题了, vue router 版本是 4.0.12, 更新到 4.0.x 的其他版本也不能使用

[geedys]

How can I solve this problem? My target routing component props is dynamic I can't define these parameters on the path when registering a route, and I don't want to splice a long string of parameters on the browser address bar during route switching
@posva

[geedys]

大佬, 我也遇到这个问题了, vue router 版本是 4.0.12, 更新到 4.0.x 的其他版本也不能使用

4.1.3 之前我没有遇到这个问题.今天更新到4.1.4就有问题.
我路由注册时使用的 props:true方式,path上没有变量定义. 最终导致目标路由组件无法接收动态传入的参数..

[AnatoleAM]

This is mentioned in the changelog: https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22

Any explanation as to why it's an "anti-pattern"? What alternatives are there when wanting to send data to another route without having it show up in the url bar? Seems like a strange sudden change and cost me about an hour figuring out why things suddenly broke.

[YiYiCool]

大佬, 我也遇到这个问题了, vue router 版本是 4.0.12, 更新到 4.0.x 的其他版本也不能使用

4.1.3 之前我没有遇到这个问题.今天更新到4.1.4就有问题. 我路由注册时使用的 props:true方式,path上没有变量定义. 最终导致目标路由组件无法接收动态传入的参数..

部署后出现了这个问题, 本地开发没问题, 于是在本地测试重新装了 node_modules, 之后本地也出现这个问题了, 切换其他 4.0.x 的版本也是同样的问题, 请问大佬有解决方案吗!!!

[geedys]

This destructive update really caught me off guard

[geedys]

大佬, 我也遇到这个问题了, vue router 版本是 4.0.12, 更新到 4.0.x 的其他版本也不能使用

4.1.3 之前我没有遇到这个问题.今天更新到4.1.4就有问题. 我路由注册时使用的 props:true方式,path上没有变量定义. 最终导致目标路由组件无法接收动态传入的参数..

部署后出现了这个问题, 本地开发没问题, 于是在本地测试重新装了 node_modules, 之后本地也出现这个问题了, 切换其他 4.0.x 的版本也是同样的问题, 请问大佬有解决方案吗!!!

暂时没有解决方案,我跟踪4.1.4源码,似乎必须要将参数在path中定义或者明确在props中定义(path中不定义参数,props:true这种方式就会导致这样的错误),但这都不满足我的需求, 我暂时还是回退到4.1.3了

[gengzhaoji]

这个改变真的很奇怪，很明显的不能满足现实的需求，请提供响应的代替方案

[gengzhaoji]

@geedys 请求你解决了吗？

[geedys]

@geedys 请求你解决了吗？

4.1.4的更新无法满足我的需求: 参数动态传递且不在路径中定义和显示.
目前只能退回到4.1.3

[YiYiCool]

大佬, 我也遇到这个问题了, vue router 版本是 4.0.12, 更新到 4.0.x 的其他版本也不能使用

4.1.3 之前我没有遇到这个问题.今天更新到4.1.4就有问题. 我路由注册时使用的 props:true方式,path上没有变量定义. 最终导致目标路由组件无法接收动态传入的参数..

部署后出现了这个问题, 本地开发没问题, 于是在本地测试重新装了 node_modules, 之后本地也出现这个问题了, 切换其他 4.0.x 的版本也是同样的问题, 请问大佬有解决方案吗!!!

暂时没有解决方案,我跟踪4.1.4源码,似乎必须要将参数在path中定义或者明确在props中定义(path中不定义参数,props:true这种方式就会导致这样的错误),但这都不满足我的需求, 我暂时还是回退到4.1.3了

感谢大佬, 我的用法和作者发的问题用法一模一样, 从列表到详情 params 传参, 详情页 params 就是空对象, 现在改成 query 传参了

[SherinBloemendaal]

Why? This really disappoints me.

Why create a patch version for a major breaking change? After running npm install the hole application just breaks.
https://docs.npmjs.com/about-semantic-versioning#incrementing-semantic-versions-in-published-packages

[superchangme]

4.0.15版本也有这个问题，回退到4.0.14就可以了。这个改动是为什么呢，params不声明就丢失了？

[zluiten]

Can't believe a breaking change is intentionally introduced in a patch release.

[fangtianq]

作者写了4个替代方案。。。
https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22

[zluiten]

@fangtianq that is not the point: many projects use f.e. renovate to automatically upgrade dependencies when they become available. That is only possible with high trust that semantic versioning is respected. Going against that is not good for anyone.

[fangtianq]

来信已经收到！！！！

[gengzhaoji]

并没有解决问题，希望依然支持原来的写法

[gengzhaoji]

@fangtianq 有好的解决方案嘛？写法

[radusuciu]

Also surprised by this breaking change being included in a patch release.

[brickgale]

This destructive update really caught me off guard

same. why would they remove this part where it's very useful for 1 time passing data accross routes.

[fangtianq]

来信已经收到！！！！

[Acetyld]

Why? This really disappoints me.

Why create a patch version for a major breaking change? After running npm install the hole application just breaks. https://docs.npmjs.com/about-semantic-versioning#incrementing-semantic-versions-in-published-packages

i 100% agree.

[fangtianq]

来信已经收到！！！！

[posva]

Locking to prevent any further spam @fangtianq seems to have an automatic reply email and it's replying to github comments.

To summarize:

• This behavior was not supported even in v3, it just happened to work in some scenarios
• Relying on it would break your app if the user reloads the page
• in 4.0.0, in order to correctly handle encoding, it only worked with strings and numbers
• in 4.1.4, in order to fix a bug with active matching, artificial params are removed when navigating

That's why this was never considered a breaking change: it wasn't meant to work (and has been advised against in issues and docs for years).

However, it's not all bad news. The changelog contains a few alternatives that do not break when the user reloads the page. The one using state should be very straightforward to migrate to:

 router.push({
   name: '...',
-  params: { some: 'data' },
+  state: { some: 'data' },
 })

Check other solutions at https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22