Mam konfigurację tras Vue z następującymi trasami rodziców i dzieci:

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

W komponencie macierzystym mam kilka menu kart, aby przejść do elementu dziecka, a także widok routera:

<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>

Po kliknięciu linku routera powoduje, że komponent dziecka, ale w widoku rodzica.

Czy istnieje sposób, w jaki mogłem zastąpić widok rodzica całkowicie z trasą dzieci, zamiast renderowania lub dołączenia do rodzica?

1
Adrian 27 październik 2020, 19:09

1 odpowiedź

Najlepsza odpowiedź

Nie jestem pewien, czy jest to właściwy sposób, aby to zrobić, ale możesz użyć V-JEŚLI Z tym. $ Route.name, aby sprawdzić nazwę routera i renderować, co chcesz renderować.

Na przykład twój router będzie taki jak:

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

I możesz po prostu sprawdzić, czy jesteś na trasie nadrzędnej lub nie tak:

<template>
<div>
 <div v-if="this.$route.name === 'Dashboard' ">
    <!-- your homepage component -->
  </div>
  <router-view></router-view>
</div>
</template>
1
omerS 27 październik 2020, 20:25