version 4.1.4 remove passing params in router.push. What is the alternative?

[patchthecode]

What problem does this feature solve?

on the changelog page here -> https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md

it explains that passing params while doing a route push is an anti pattern and it was removed.
Is there an alternative?

That link explains that i only have 2.

1. put the data in query
2. or as an actual param

I cannot use option #1 as it will change the url to have params. This is something that isnt desirable for my app.
And as for option #2, it looks like i can only add it as actual params in boolean mode as shown here -> https://router.vuejs.org/guide/essentials/passing-props.html#boolean-mode

I assume that this prop values for boolean mode is setup in the router.js file? If this is the case, then I cannot use this because when it there file, i have no context of what is actually being passed. By this i mean, the way i currently use it, when i do a router.push, i'll be inside some template file that knows what data to add to the params for the next view. But in the router.js file, i have no context for what to pass.

What does the proposed API look like?

can the propose API look like how its always been?

router.push({ name: 'somewhere', params: { oops: 'gets removed' }})

[gengzhaoji]

那现在不需要显示在路径当中的参数应该怎么传递？

[patchthecode]

by setting props: true in your router.js file

[gengzhaoji]

No, it's useless

…

------------------ 原始邮件 ------------------ 发件人: ***@***.***>; 发送时间: 2022年8月26日(星期五) 中午11:38 收件人: ***@***.***>; 抄送: ***@***.***>; ***@***.***>; 主题: Re: [vuejs/router] version 4.1.4 remove passing params in router.push. What is the alternative? (Issue #1531) by setting props: true in your router.js file — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***>

[vincent-lu]

Also have this problem. Using pinia or history api state just feel less intuitive than passing params directly.

[patchthecode]

@vincent-lu
you
can
pass
params
directly
by going to your router and setting props to true.

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'index',
      component: () => import('../views/index.vue'),
      props: true               <----------------  LOOK AT THIS
    },
    ```
    
    Now pass stuff in your params like you did before, and it will end up in the props of the component