Vue.js Vue路由器子路由未按预期工作

当尝试使用

vue router

使子路由工作时，我的子路由呈现的是父路由组件，而不是该子路由的声明组件。似乎必须为父管线声明组件，否则将根本不显示任何组件。例如，如果我这样声明我的路线：

Router.map({
    '/login': {
        component: Login
    },
    '/stations': {
        subRoutes: {
            '/': {
                component: Station
            },
            '/create': {
                component: CreateStation
            }
        }
    },
});

Router.map({
    '/login': {
        component: Login
    },
    '/stations': {
        component: Station,
        subRoutes: {
            '/create': {
                component: CreateStation
            }
        }
    },
});

'/stations': {
    component: Station,
    subRoutes: {
        '/': {
            component: ListStations
        },
        '/create': {
            component: CreateStation
        }
    }
}

任何路线上都不显示任何内容。但如果我这样宣布我的路线：

Router.map({
    '/login': {
        component: Login
    },
    '/stations': {
        subRoutes: {
            '/': {
                component: Station
            },
            '/create': {
                component: CreateStation
            }
        }
    },
});

Router.map({
    '/login': {
        component: Login
    },
    '/stations': {
        component: Station,
        subRoutes: {
            '/create': {
                component: CreateStation
            }
        }
    },
});

'/stations': {
    component: Station,
    subRoutes: {
        '/': {
            component: ListStations
        },
        '/create': {
            component: CreateStation
        }
    }
}

---

My

stations/create

路线显示与

stations

路线相同的组件。给出了什么？

您仍然需要声明

/stations

路由的

根
组件，如下所示：

Router.map({
    '/login': {
        component: Login
    },
    '/stations': {
        subRoutes: {
            '/': {
                component: Station
            },
            '/create': {
                component: CreateStation
            }
        }
    },
});

Router.map({
    '/login': {
        component: Login
    },
    '/stations': {
        component: Station,
        subRoutes: {
            '/create': {
                component: CreateStation
            }
        }
    },
});

'/stations': {
    component: Station,
    subRoutes: {
        '/': {
            component: ListStations
        },
        '/create': {
            component: CreateStation
        }
    }
}

根据文件：

router.map({
  '/foo': {
    component: Foo,
    // add a subRoutes map under /foo
    subRoutes: {
      '/bar': {
        // Bar will be rendered inside Foo's <router-view>
        // when /foo/bar is matched
        component: Bar
      },
      '/baz': {
        // Same for Baz, but only when /foo/baz is matched
        component: Baz
      }
    }
  }
})

router.map({
“/foo”：{
组成部分：富，
//在/foo下添加子例程映射
子例程：{
“/bar”：{
//条形图将在Foo的内部呈现
//当/foo/bar匹配时
组件：棒
},
“/baz”：{
//Baz也一样，但仅当/foo/Baz匹配时
组成部分：Baz
}
}
}
})

现在，在上面的配置中，当您访问/foo时，什么都不会发生
在Foo的出口内渲染，因为没有匹配的子路由

更新：

创建子例程时，您告诉父组件（在本例中为
站
），它需要在其模板内承载一些组件。Station和CreateStation不是并排放置的，它们具有父子关系（就路线而言）

这就是为什么组件站需要在其模板中具有
路由器视图
元素，并且
列表站
和
创建站
都将在其内部呈现

类似这样的内容：
您仍然需要声明
/stations
路由的
根
组件，如下所示：

Router.map({
    '/login': {
        component: Login
    },
    '/stations': {
        subRoutes: {
            '/': {
                component: Station
            },
            '/create': {
                component: CreateStation
            }
        }
    },
});

Router.map({
    '/login': {
        component: Login
    },
    '/stations': {
        component: Station,
        subRoutes: {
            '/create': {
                component: CreateStation
            }
        }
    },
});

'/stations': {
    component: Station,
    subRoutes: {
        '/': {
            component: ListStations
        },
        '/create': {
            component: CreateStation
        }
    }
}

根据文件：

router.map({
  '/foo': {
    component: Foo,
    // add a subRoutes map under /foo
    subRoutes: {
      '/bar': {
        // Bar will be rendered inside Foo's <router-view>
        // when /foo/bar is matched
        component: Bar
      },
      '/baz': {
        // Same for Baz, but only when /foo/baz is matched
        component: Baz
      }
    }
  }
})

router.map({
“/foo”：{
组成部分：富，
//在/foo下添加子例程映射
子例程：{
“/bar”：{
//条形图将在Foo的内部呈现
//当/foo/bar匹配时
组件：棒
},
“/baz”：{
//Baz也一样，但仅当/foo/Baz匹配时
组成部分：Baz
}
}
}
})

现在，在上面的配置中，当您访问/foo时，什么都不会发生
在Foo的出口内渲染，因为没有匹配的子路由

更新：

创建子例程时，您告诉父组件（在本例中为
站
），它需要在其模板内承载一些组件。Station和CreateStation不是并排放置的，它们具有父子关系（就路线而言）

这就是为什么组件站需要在其模板中具有
路由器视图
元素，并且
列表站
和
创建站
都将在其内部呈现

类似这样的内容：
我试过了，它只是在
/
和
/create
上加载
/stations
组件视图。还有其他想法吗？你100%确定你在CreateStation上加载了正确的组件吗？是的，因为如果我不使用
子例程，它会按预期工作。我知道出了什么问题。。。看看这个：，我会更新我的答案。谢谢你的帮助！因此，基本上，我需要为我的
子例程
组件提取一个父组件。明白了。我试过了，它只加载了
/
和
/create
上的
/stations
组件视图。还有其他想法吗？你100%确定你在CreateStation上加载了正确的组件吗？是的，因为如果我不使用
子例程，它会按预期工作。我知道出了什么问题。。。看看这个：，我会更新我的答案。谢谢你的帮助！因此，基本上，我需要为我的
子例程
组件提取一个父组件。知道了。