CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvue-router
Mr. Perfectionist
Mr. Perfectionist

Reputation: 2746

Load Component with Vue Router

I want to load 3 Components at a time like that:

<app-header />
<app-main />
<app-footer />

But I want to load Router View also in this page.

<app-header />
<router-view />
<app-footer />

While I will click on the router-link then <app-main /> will be vanish and <router-view /> will be visible.

Is there any better way to handle it without if or show?

Upvotes: 3

Views: 538

Answers (2)

Sourabh Jain 543
Sourabh Jain 543

Reputation: 208

You can remove <app-main /> from the template replace it with <router-view/>, now whenever you need app-main component or some other component in place configure it using routes definition.

Upvotes: 0

piemekanika
piemekanika

Reputation: 445

You can pass router-view via slot to your app-main component like this:

<app-header />
<app-main>
  <router-view/>
</app-main>
<app-footer />

Also you need to insert a slot tag in your app-main component like this:

<template>
  <!-- your code -->
    <slot></slot>
  <!-- ... -->
</template>

For more details visit https://v2.vuejs.org/v2/guide/components-slots.html

Upvotes: 1

Related Questions