In Vue3, is there a way to pass attributes to routes without displaying the value in the url?
I define 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 this route:
Some link
When I change the path topath: '/someRoute/:message',the message is delivered fine, but I just want the message to be delivered without showing it in the url.
I've seen a few Vue2 examples using this approach (e.g. https://stackoverflow.com/a/50507329/1572330), but apparently they no longer work in Vue3.
Also have all the examples in the Vue3 documentation (https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js / https://v3.router.vuejs. org/guide/essentials/passing-props.html) pass their value through the url itself, so I'm not sure if it's still possible.
Any ideas on this would be helpful.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Finally I found some relevant content in the change log:https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22
Obviously, it is no longer possible to send attributes via parameters without displaying them in the url. But luckily, they have some alternative suggestions. What worked best for my case was to use
state: { ... }instead of:Now, in the code of the page, I read the properties from
history.sateand put that value into whatever properties I need.If the url/route itself does not change, you need to have an update hook and use
force: truepublic created() { this.message = window.history.state.message; } public updated() { this.message = window.history.state.message; }PS
history.statehas some limitations, so in other cases one of the other suggestions in the changelog might be better