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

Question

所以我有这样一条路线:

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对象，他们正确地检测路线和组件。只是模板不会呈现。我还有一个 <router-view>在我的 App.vue如果有帮助的话。

难道不能有多重嵌套路由吗？还是我遗漏了什么？

Answer 1

健康路线应该是这样的:

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

如果您出于任何原因根本不需要Health 组件(即您没有任何共享功能或模板跨每个 child )，您可以完全删除 health 路线并将其替换为:

{
  path: 'health/overview',
  component: Overview,
},
{
  path: 'health/blood',
  component: Blood,
},