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

Time:02-18

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?

CodePudding user response:

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

CodePudding user response:

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

  • Related