vue.js - 在模板中放置一个路由器视图作为子模板这是行不通的

Question

当我在模板中放置路由视图时，我的 vue 路由器不加载内容，我该如何加载？

在我的主页上，我有

<router-view name="homepage"></router-view>

代码从我的 vue 路由器完美加载，但主页模板中包含的代码没有被加载。

...
routes:
    [
        {
            path: '/',
            name: 'homepage',
            components: {
                homepage: HomepageTemplate,
                subPart: subPartTemplate
            }
        }
]
...

主页模板：

<template>
    <div>
        <router-view name="subPartTemplate"/>
    </div>
</template>

标签： vue.jsvue-router

Answer 1

您将组件命名subPart为subPartTemplate;

<template>
    <div>
        <router-view name="subPart"/>
    </div>
</template>

编辑：我看到你编辑了你的帖子；出了什么问题是你使用一个孩子<router-view>而没有在你的路线中定义孩子；

您应该在路径中定义子项：

    {
        path: '/',
        name: 'homepage',
        component: HomepageTemplate,
        children: [
            { path: '/', component: subPartTemplate }
        ]
    }

现在<router-view>inhomepageTemplate应该是subPartTemplate. 无需为此使用命名组件。<router-view>当您在一个模板中需要多个 '时，命名组件很有用。

查看文档以获取更多详细信息。