Javascript vue路由器赢得';在嵌套路由上渲染模板

Javascript vue路由器赢得';在嵌套路由上渲染模板,javascript,vue.js,vuejs2,vue-component,vue-router,Javascript,Vue.js,Vuejs2,Vue Component,Vue Router,我有一条这样的路线: const routes = [{ path: '/', component: Home, children: [ { path: "/health" children: [ { path: 'overview' component: Overview

我有一条这样的路线:

const routes = [{
    path: '/',
    component: Home,
    children: [
        {
            path: "/health"
            children: [
                {
                    path: 'overview'
                    component: Overview
                },
                {
                    path: 'blood',
                    component: Blood
                }
            ]
        }
    ]
}]
<template>
    <div id="home">
         <router-view></router-view>
    </div>
</template>
{
  path: 'health',     // not '/health'
  component: Health,  // this can just be a dummy component with a <router-view/>
  children: [...],
},
在Home组件中,我有如下内容:

const routes = [{
    path: '/',
    component: Home,
    children: [
        {
            path: "/health"
            children: [
                {
                    path: 'overview'
                    component: Overview
                },
                {
                    path: 'blood',
                    component: Blood
                }
            ]
        }
    ]
}]
<template>
    <div id="home">
         <router-view></router-view>
    </div>
</template>
{
  path: 'health',     // not '/health'
  component: Health,  // this can just be a dummy component with a <router-view/>
  children: [...],
},

但是当我导航到
/health/overview
/health/blood
路径时,与组件对应的模板将不会呈现。我检查了应用程序
$route
对象,它们正确地检测到了路由和组件。只是模板不会渲染。我的
App.vue中也有一个
,如果有帮助的话


不可能有多个嵌套管线吗?还是我遗漏了什么?

健康途径应该是这样的:

const routes = [{
    path: '/',
    component: Home,
    children: [
        {
            path: "/health"
            children: [
                {
                    path: 'overview'
                    component: Overview
                },
                {
                    path: 'blood',
                    component: Blood
                }
            ]
        }
    ]
}]
<template>
    <div id="home">
         <router-view></router-view>
    </div>
</template>
{
  path: 'health',     // not '/health'
  component: Health,  // this can just be a dummy component with a <router-view/>
  children: [...],
},