vue-router 不会在嵌套路由上渲染模板

Posted 2023-02-23

【中文标题】vue-router 不会在嵌套路由上渲染模板

【英文标题】：vue-router won't render template on nested route

【发布时间】：2017-09-16 12:48:27

【问题描述】：

所以我有这样的路线：

const routes = [
    path: '/',
    component: Home,
    children: [
        
            path: "/health"
            children: [
                
                    path: 'overview'
                    component: Overview
                ,
                
                    path: 'blood',
                    component: Blood
                
            ]
        
    ]
]

在 Home 组件中我有这样的东西：

<template>
    <div id="home">
         <router-view></router-view>
    </div>
</template>

但是当我导航到/health/overview 和/health/blood 路由时，与组件对应的模板不会呈现。我检查了应用程序$route 对象，它们正确检测到路由和组件。只是模板不会呈现。如果有帮助，我的App.vue 中还有一个<router-view>。

不可能有多个嵌套路由吗？还是我错过了什么？

【参考方案1】：

健康路线应该是这样的：

  path: 'health',     // not '/health'
  component: Health,  // this can just be a dummy component with a <router-view/>
  children: [...],
,

如果您出于任何原因根本不需要 Health 组件（即您没有任何共享功能或模板在每个孩子之间），您可以完全删除健康路线并将其替换为：

  path: 'health/overview',
  component: Overview,
,

  path: 'health/blood',
  component: Blood,
,