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?

gagz · Accepted Answer · 2022-02-17 16:46:41Z

1

To get params from route you need to use to.params or from.params, if you want to access path you can get it from to.path or from.path depends what you need.

More info on https://router.vuejs.org/api/#routelocationnormalized

answered Feb 17, 2022 at 16:46

gagz

2113 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Esa Kian · Accepted Answer · 2022-02-17 17:07:00Z

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

answered Feb 17, 2022 at 17:07

Esa Kian

2811 gold badge5 silver badges12 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related