Sometimes, we want to pass props to Vue.js components instantiated by Vue Router.

In this article, we’ll look at how to pass props to Vue.js components instantiated by Vue Router.

How to pass props to Vue.js components instantiated by Vue Router?

To pass props to Vue.js components instantiated by Vue Router, we can pass the prop value to router-view.

For instance, we write

<template>
  <router-view :someProp="someProp"></router-view>
</template>

to pass the someProp to router-view.

Then we can register it from any route component with

<script>
//...
export default {
  //...
  props: {
    someProp: String,
  },
  //...
};
</script>

to register someProp in a route component.

Conclusion

To pass props to Vue.js components instantiated by Vue Router, we can pass the prop value to router-view.