How to replace parent view with child route component in Vue

Question

I have a Vue routes setup with the following parent and child routes:

{
    path: '/dashboard', component: dashboard,
    children: [
        {
            path:'report', component: report
        }
    ]
},

And in the parent component I have some card menus to navigate to the child component and also a router-view:

<template>
    <div class="container mt-5">
        <div class="row mt-0 h-100">
            <!-- menu item-->
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 my-auto" id="report-card">
                <router-link to="/dashboard/report" class="card2">
                    <div class="d-flex flex-column justify-content-center">
                        <div class="card-icon p-3">
                            <img :src="icons[0]"/>
                        </div>
                        <h3>Make a Report</h3>
                        <p class="small">Make a report of a crime or suspicious activities</p>
                    </div>
                </router-link>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

When I click on the router link, it does render the child component, but in the parent view.

Is there a way in which I could replace the parent view entirely with the child route instead of rendering or appending to the parent?

breadcrumb nav. So if you select an option from the parent menu, it should render the vue component and dynamically build the menu — Adrian

omerS omerS · Accepted Answer · 2020-10-27T20:25:58

I am not sure if this is the right way to do it but you can use v-if with this.$route.name to check router name and render what you want to render.

For example your router will be like:

{
    path: '/dashboard', 
    name: "Dashboard",
    component: dashboard,
    children: [
        {
            path:'report',
            name: "Report",  
            component: report
        }
    ]
},

and you can simply check if you are on parent route or not like this:

<template>
<div>
 <div v-if="this.$route.name === 'Dashboard' ">
    <!-- your homepage component -->
  </div>
  <router-view></router-view>
</div>
</template>

How to replace parent view with child route component in Vue

1 Answers