How to pass data to a router-view in Vue.js

Question

How can I pass data from my main app to a component through router-view in Vue.js? I have successfully gotten the data from my API as shown below:

mounted() {
    // console.log(model)
    this.model = model;
    // console.log(this.model)
}

The component I want to pass data to has been loaded as shown below:

@section('content')
<div style="padding: 0.9rem" id="app">
    <router-view name="bookBus"></router-view>
    <router-view></router-view>
    {{-- @{{ model }} --}}
</div>

@stop

How do I pass the model data to the bookBus component?

Answer 1

From https://router.vuejs.org/en/api/router-view.html

Any non-name props will be passed along to the rendered component, however most of the time the per-route data is contained in the route's params.

So if you want to pass data down from the parent component, rather than from the router, it would be something like this:

<router-view name="bookBus" :model="model"></router-view>

Your bookBus component would then need to have a model prop configured to receive the data, just like it would for any other prop.