CODEWITHSUNDEEP
vue.jsnavbarbootstrap-vue
HelloThere
HelloThere

Reputation: 1040

How to pass props in BootstrapVue to router-link

Here is how BootstrapVue's navbar is used https://bootstrap-vue.js.org/docs/components/navbar, but for one view I need to pass a prop to it from the navbar.

It's pretty easy to add it in raw Vue but BootstrapVue seems not have a solution for that. Does anybody have any clue?

Here is a working copy,

<b-nav-item to="/login">register</b-nav-item>

I want to change it to something like:

<b-nav-item to="/login" :action="'register'">register</b-nav-item>

where "action" is my the prop I need to pass.

Upvotes: 4

Views: 3271

Answers (2)

Troy Morehouse
Troy Morehouse

Reputation: 5435

Use query parameters on your :to prop by using a Location object:

<b-nav-item :to="{ path: '/login' query: { action: 'register'} }">
  register
</b-nav-item>

Or if your route is set up for a parameter slug (i.e. `/login/:action'):

<b-nav-item :to="{ path: '/login' params: { action: 'register'} }">
  register
</b-nav-item>

If you are using named routes, you can just adjust the above to use name instead of path.

Upvotes: 6

jacob13smith
jacob13smith

Reputation: 929

You should just pass action as a param in the route URL. Then in your route declaration, you can assign a prop for that route that comes from the URL. I would format the URL like so:

<b-nav-item to="/login?action=register">register</b-nav-item>

Then in your path declaration, use something like this:

{
  path: 'login',
  name: 'login',
  component: Login,
  props: (route) => ({ action: route.query.action })
}

Upvotes: 1

Related Questions