Vue-router — props — 1/2

How to send data as props by vue-router

Something you didn’t know about vue-router!

This is the first(1) part of a two(2) part series on props in vue-router. Checkout the other articles in the series:

1. Vue-router — props — 1/2 : How to send data as props (you are here)
2. Vue-router — props — 2/2: How to send data between components (soon)

In this article I will cover three(3) things:

1. How to pass data to a component as props by vue-router?
2. How to register $route.params as props ?
3. How to modify $route.paramsand send custom prop?

Ad. 1.

First things first. How do you pass props with vue-router ?

// DisplayComponent takes {user} as props and display it
<template>
  <div>
    <p>
      User name: 
      <strong>{{ user.firstName }} {{ user.lastName }}</strong>
    </p>
  </div>
</template>
<script>
export default {
  name: "DisplayComponent",
  props: { 
    user: {
      type: Object,
      required: true,
    },
  },
}
</script>

//  router.js
...
routes: [
  ...  //  some other routes you need
  {
    path: "/display-component",
    name: "DisplayComponent",
    component: DisplayComponent,
    props: {  // <-- props as an Object
      user: {
        firstName: "John",
        lastName: "Snow",
      },
    },
  },
],

That’s it!

Since we now know how to send props by vue-router let’s jump to the next question.

Ad 2.

Did you ever find yourself in a situation where you had some data in a $route.paramslike the id and kept using this.$route.params.id in your methods and computed properties?

Of course you did, we all did one time ;-)

// DisplayComponentParams display user id from $route.params.id
<template>
  <div>
    <p>
      User id: 
      <strong>{{ $route.params.id }}</strong>
    </p>
  </div>
</template>
<script>
export default {
  name: "DisplayComponentParams",
}
</script>

The example above doesn’t look scary, but imagine a big component where you use this.$route.params.id all over your methods and computed.
This can be simplified.

// DisplayComponentParams display user id from props
<template>
  <div>
    <p>
      User id: 
      <strong>{{ id }}</strong>
    </p>
  </div>
</template>
<script>
export default {
  name: "DisplayComponentParams",
  props: {
    id: {
      type: String,
      required: true,
    },
  },
}
</script>

In router.js you simply need to “turn on” props ;-)

//  router.js
...
routes: [
  ...  //  some other routes you need
  {
    path: "/display-component-params/:id",
    name: "DisplayComponentParams",
    component: DisplayComponentParams,
    props: true, // <-- props as a Boolean
  },
],

Now all the params from the router go to the component as props.
Got it? Great!

Now it’s time for a combo :D

Ad. 3.

Imagine a situation where you have a route, with params, something like above:
display-component-params-combo/:id but you want to send a totaly different prop based on that param.
How would you do that?

// DisplayComponentParamsCombo display section if topUser
<template>
  <div>
    <button v-if="topUser">Special price!</button>
    <button v-else>Buy now!</button>
  </div>
</template>
<script>
export default {
  name: "DisplayComponentParamsCombo",
  props: {
    topUser: {
      type: Boolean,
      required: true,
    },
  },
}
</script>

//  router.js
...
routes: [
  ...  //  some other routes you need
  {
    path: "/display-component-params-combo/:id",
    name: "DisplayComponentParamsCombo",
    component: DisplayComponentParamsCombo,
    props(route) { // <-- props as a Function
      const topUsers = ["322", "123", "624"];
      return { topUser: topUsers.includes(route.params.id) };
    },
  },
],

You can manipulate props freely.

Here is my Codesandbox if you want to play more with it.

Link: https://codesandbox.io/s/vue-router-sending-props-12-ytob2

This article was not about putting more logic into the router.
I personally don’t think this is a good practice.
The article is just to show that it can be done ;-)

There are always scenerios that doing something has its justification.
If that is the case, then feel free to use this pattern.