Vue中如何用子路由组件替换父视图

Posted 2023-02-23

【中文标题】Vue中如何用子路由组件替换父视图

【英文标题】：How to replace parent view with child route component in Vue

【发布时间】：2021-02-09 23:16:04

【问题描述】：

我有一个带有以下父子路由的 Vue 路由设置：

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

在父组件中，我有一些卡片菜单可以导航到子组件，还有一个路由器视图：

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

当我点击路由器链接时，它会渲染子组件，但在父视图中。

有没有一种方法可以完全用子路由替换父视图，而不是渲染或附加到父视图？

【问题讨论】：

将其作为单独的路由而不是子路由

是的，我这样做了，但我打算添加一个面包屑菜单

您是指面包屑导航还是 URL？ This 可能会有所帮助

面包屑导航。所以如果你从父菜单中选择一个选项，它应该渲染 vue 组件并动态构建菜单

【参考方案1】：

我不确定这是否是正确的方法，但您可以使用 v-if 和 this.$route.name 来检查路由器名称并渲染您想要渲染的内容。

例如你的路由器会是这样的：

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

您可以像这样简单地检查您是否在父路线上：

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