Maison > Questions et réponses > le corps du texte
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.
P粉4312202792023-12-12 00:53:21
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