Vue3 : Comment envoyer des paramètres à une route sans les ajouter à l'url dans Vue3 ?

Question

Dans Vue3, existe-t-il un moyen de transmettre des propriétés aux routes sans afficher la valeur dans l'url ?

Je définis le parcours comme ceci :

{
    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
}

J'appelle cet itinéraire :

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

Lorsque je change le chemin vers path: '/someRoute/:message',, le message est bien transmis, mais je veux juste que le message soit transmis sans l'afficher dans l'URL.

J'ai vu quelques exemples Vue2 utilisant cette approche (par exemple https://stackoverflow.com/a/50507329/1572330), mais apparemment, ils ne fonctionnent plus dans Vue3.

Aussi tous les exemples de la documentation Vue3 (https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js/https://v3.router.vuejs.org/ guide/essentials/passing-props.html) transmettent leur valeur via l'URL elle-même, donc je ne sais pas si c'est toujours possible.

Toute réflexion à ce sujet serait utile.

Answer 1

Enfin, j'ai trouvé du contenu pertinent dans le journal des modifications : https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22

Apparemment, il n'est plus possible d'envoyer des attributs via des paramètres sans les afficher dans l'url. Mais heureusement, ils ont quelques suggestions alternatives. Ce qui a le mieux fonctionné dans mon cas a été d'utiliser state: { ... } au lieu de :

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

Maintenant, dans le code de la page, je lis l'attribut de history.sate et mets cette valeur dans l'attribut dont j'ai besoin.

Si l'URL/la route elle-même ne change pas, vous devez disposer d'un hook de mise à jour et utiliser force: true

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

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

PS history.state Il y a certaines limitations, donc dans d'autres cas, l'une des autres suggestions du journal des modifications pourrait être meilleure