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? https://stackoverflow.com/q/50998305/4652564 — Nicolapps, Nov 23 '22 at 16:05
Nope, but I found a solution in the changelog: https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22 — Arno van Oordt, Nov 23 '22 at 18:06

Arno van Oordt · Accepted Answer · 2022-11-23T18:03:18.527

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

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

1 Answers1