How can you pass data from a parent route to a child route in Vue.js nested routes?

This is definitely doable with props.

In parent component

<template>
...
<router-view :profile="myDataObject.profile" />
...
</template>

In child component

<script>
export default {
  name: "child",
  props: ["profile"]
...

Now, in your child component you may access the data by referring to this.$props.profile.

I am using this pattern with Vue 2.5.16. and Vue Router 3.0.1.

PS: A good option is to also use vuex for such scenarios.

Related