Vue3: How to send params to a route without adding them to the url in Vue3?

Question

In Vue3 is there a way to pass properties to a route without the values showing in the url?

I defined the route like this:

{
    path: '/someRoute',
    name: 'someRoute',
    component: () => import('@/app/pages/SomeRoute.vue'),
    props: (route) => {
            ...route.params
        }, // <-- I've seen this method in Vue2 but in Vue3 the route.params is just empty here
}

I call the route like this:

<router-link :to="{ name: 'someRoute', params: { message: 'Some Message' } }">Some link</router-link>

When I change path into path: '/someRoute/:message', the message come through just fine but I just want to pass the message without it showing up in the url.

I've seen a couple of Vue2 examples that use this method (e.g. https://stackoverflow.com/a/50507329/1572330) but apparently they don't work in Vue3 anymore.

Also all the examples in the Vue3 docs (https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js / https://v3.router.vuejs.org/guide/essentials/passing-props.html) pass on their values through the url itself so I'm not sure if it's even possible anymore.

Any thoughts on this would be helpfull.

Does this question help you? stackoverflow.com/q/50998305/4652564 — Nicolapps
– Nicolapps, Commented Nov 23, 2022 at 16:05
Nope, but I found a solution in the changelog: github.com/vuejs/router/blob/main/packages/router/… — Arno van Oordt
– Arno van Oordt, Commented Nov 23, 2022 at 18:06

Arno van Oordt · Accepted Answer · 2022-11-23 18:03:18Z

8

Finally I found something about this in the changelog: https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22

Apparently it's no longer possible to send properties via params without the showing in the url. But fortunately they give some alternative suggestions. The one that worked best for my situation was to use state: { ... } instead:

<router-link :to="{ name: 'someRoute', force: true, state: { message: 'Some Message' } }">Some link</router-link>

Now in the code of the page I read the property from the history.sate and put the value in whatever property I need it.

In case the url/route itself doesn't change you need to have an update hook and use force: true

public created() {
    this.message = window.history.state.message;
}

public updated() {
    this.message = window.history.state.message;
}

PS history.state has some limitations so in other situations one of the other suggestions from the changelog might work better

edited Nov 23, 2022 at 18:03

answered Nov 23, 2022 at 17:50

Arno van Oordt

3,6507 gold badges43 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wayne Smallman Over a year ago

I ran into the same problem, but there's almost no documentation to assist. I'm seeing a weird quirk where it allows me to pass arbitrary arguments, such as the one in your example, but not existing arguments, such as the ones its stripping out of params.

Collectives™ on Stack Overflow

Vue3: How to send params to a route without adding them to the url in Vue3?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related