Load Component with Vue Router

Question

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?

tony19 · Accepted Answer · 2022-07-15 02:08:09Z

1

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

edited Jul 15, 2022 at 2:08

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 2, 2019 at 12:08

piemekanika

4452 gold badges7 silver badges14 bronze badges

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

1 Comment

Mr. Perfectionist Over a year ago

Thanks but I need to replace app-main with router-view.

Sourabh Jain 543 · Accepted Answer · 2023-05-25 14:14:25Z

0

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.

answered May 25, 2023 at 14:14

Sourabh Jain 543

2081 silver badge10 bronze badges

Collectives™ on Stack Overflow

Load Component with Vue Router

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related