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?

skirtle · Accepted Answer · 2018-04-07 18:11:18Z

27

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.

answered Apr 7, 2018 at 18:11

skirtle

29.3k4 gold badges49 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related