VueJS：为什么我的子路由/组件只有在刷新页面后才呈现？

Question

当我单击子组件的父组件时，我无法渲染子组件。

当我单击链接进入“设置”页面时，我的

SettingsSummaryPage

会被渲染，但我也希望

SettingsPage

组件也能作为子组件渲染。

我认为我的设置正确 - 我的

routes.js

文件如下所示：

...

{
    path: '/settings',
        name: 'app.settings.summary',
        component: () =>
            import(
                /* webpackChunkName: 'app.settings.summary' */ '@/views/settings/SettingsSummaryPage.vue'
            ),
        meta: { requiresAuth: true },
        children: [
            {
                path: '',
                name: 'app.settings',
                component: () =>
                    import(
                        /* webpackChunkName: 'app.settings' */ '@/views/settings/SettingsPage.vue'
                    ),
                meta: { requiresAuth: true },
            },
        ],
    },

...

我的

SettingsSummary.vue

组件如下所示：

<template>
    <div class="flex h-full flex-1 xl:overflow-hidden">
        <SettingsNavigation />

        <router-view />
    </div>
</template>

我的

SettingsPage.vue

组件如下所示：

<template>
    <p>Settings page works!</p>
</template>

因此，当我单击“设置”链接时，我期望看到的是一个包含导航和“设置页面有效！”的页面。到一边去。

如果我点击我的

/settings

链接，然后完全刷新页面，所有这些都会很好用。 如何让我的

SettingsPage

组件在不刷新页面的情况下渲染 ？

Answer 1

找到正确的谷歌搜索词后，我偶然发现了

这个SO线程。

路线和组件配置正确，我做错的是链接到错误的路线。

以上面为例，要渲染“设置”页面，我需要链接到子项，而不是使用

app.settings.summary

 作为 

:to

 链接。在这种情况下，

app.settings

。

现在我的登陆页面子项正在渲染！