How get the param from url on Vue.js and use it in router file?

Question

I have router file, which contains all my routes.

Here is an example on one route:

    path: '/events/:step',
    children: [
      {
        path: '',
        name: 'event.step',
        components: {
          default: Event,
          sidebar: EventSidebar
        }
      }
    ],
    props: {
      default: ({ params, query: { id } }) => ({ id, ...params })
    },
    components: {
      header: () => import('NavBar'),
      default: () => import('Event')
    },
    async beforeEnter(to, from, next) {
      if (step === 'login') { // can't find step
        // do something
      }
      next()
    }

I need to get the step param from route and if it is login do something in beforeEnter function. How can I get it?

Answer 1

You can register global before guards using router.beforeEach:

router.beforeEach((to, from, next) => {
  if (['Login', 'Signup'].includes(to.name) && logged_in)
    next({ name: 'Home' })
  else next()
})

https://router.vuejs.org/guide/advanced/navigation-guards.html