Is there a way to pass variables in Vuejs router?

Question

I have a reusable component that only needs a different api call depending on the component everytime it's called.

I want to be able to do something like this

const routes = [
  {
    path: '/books',
    component: () => import('./Pages/Book-highlights/Nav/index.js'),
    props: {api: '/api/allBooks'}
  }
]
const router = new VueRouter({
  routes
})

As I understand it, the props is just to enable the use of URL slugs (or whatever they are called) ?api=something. I want to be able to do something like this

<Nav api='/api/allBooks'></Nav>

But of course, buy passing that api in the VueRouter

Everything I have researched tells me it can't be done but I feel like I have seen it somewhere!

@ibrahimmahrir I've seen that but I don't think that what I need. That simply uses router params, I need to pass my own params without touching the route (without relying on query strings) — relidon
– relidon, Commented Sep 18, 2020 at 22:59
Well, it's hard to understand what you are looking for here. Can you please elaborate? — ibrahim mahrir
– ibrahim mahrir, Commented Sep 18, 2020 at 23:01
@ibrahimmahrir in the example you provide, the id comes from the URL /:id I need to provide that id without replying on the url — relidon
– relidon, Commented Sep 18, 2020 at 23:03
Why you need to pass them with the router then? just have them on the component — ibrahim mahrir
– ibrahim mahrir, Commented Sep 18, 2020 at 23:14

Hassan Fazal · Accepted Answer · 2020-09-18 23:22:26Z

You can use do this in different ways. 1 Passing parameter through router and working on the necessary configurations based on the parameter. https://codeburst.io/passing-props-to-vue-js-route-components-with-vue-router-e9ad99d8a133 2 if you are calling it as a component in the application, then you could pass in parameters as what you have mentioned above and similarly accept the parameter within the component and work on the necessary changes based on the input value https://blog.logrocket.com/how-to-use-props-to-pass-data-to-child-components/ Let me know if you have any questions

Collectives™ on Stack Overflow

Is there a way to pass variables in Vuejs router?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related