Pass hidden data with vue-router

Question

I would like to pass data when navigating from one route to another, but the data shouldn't be shown to the user in the URL, as it is with route parameters. Instead, I want the data to stay "hidden" from the user, since, in my case, I want to pass an authentication key (which is pretty long and shouldn't necessarily be shown to the user).

Is this achievable using router.push()?

Answer 1

What I think I would do to solve this, is to define props, just below where you define your path, you can add props to it. See: Passing props to Route Components

Essentially you define what do you want to pass, an object, a value, whatever you need. And within your router-view component, you bind the prop that you want to pass.

For example:

: is shorthand for v-bind

<router-view :props-name-defined-in-router="value"></router-view>

Remember to use the proper casing in Vue.js See: Component name casing in templates

Additionally, I think this other question seems to fit your needs. Passing props to Vue.js components instantiated by Vue-router