How to pass data to vue-router route?

Question

Vue.js

I have a set of routes:
/foo
/bar
/baz
...
When the application is initialized, when any of these routes are requested, it redirects to the /i-love-vue-js. in the component that renders this route, some processes take place, after which, a redirect to the original route occurs. When redirecting to /i-love-vue-jsme, I need to transfer data to this route. The question is how to do it? I know that you can use query, but then this data will be visible in the address bar, and I would like to avoid this. the redirect goes like this:

router.beforeEach((to, from, next) => {
  if(true) {
    next({
      path: '/i-love-vue-js',
      query: data
    })
  }
  
  next()
})

I read the documentation, but I did not find a solution with a query except for a solution. if I overlooked, poke your nose.

Answer 1

Give the route a name and pass the data as params:

next({
  name: 'здесь имя маршрута, придумайте сами',
  params: data,
})

In the route component, they will be available as this.$route.params. If you want the params properties to be passed to the component's parameters, also add . props: true