VueJS：为何子路由/组件仅页面刷新后才渲染？求解决方法

1. 修正路由跳转目标 #

你当前点击的链接可能指向了父路由的名称app.settings.summary，这会导致Vue Router仅加载父组件，未触发默认子路由的渲染。请将跳转目标改为子路由的名称app.settings，或直接使用路径/settings：

<!-- 使用子路由名称跳转 -->
<router-link :to="{ name: 'app.settings' }">Settings</router-link>

<!-- 或直接使用路径跳转 -->
<router-link to="/settings">Settings</router-link>

2. 验证路由懒加载配置 #

若跳转目标修正后仍无效，可能是懒加载的webpack chunk处理异常。可临时将路由改为同步导入，排查是否为懒加载问题：

// 替换routes.js中的懒加载代码
import SettingsSummaryPage from '@/views/settings/SettingsSummaryPage.vue'
import SettingsPage from '@/views/settings/SettingsPage.vue'

{
    path: '/settings',
    name: 'app.settings.summary',
    component: SettingsSummaryPage,
    meta: { "requiresAuth": true },
    children: [
        {
            path: '',
            name: 'app.settings',
            component: SettingsPage,
            meta: { "requiresAuth": true },
        },
    ],
},

如果同步导入后子组件正常渲染，说明需要检查webpack的chunk命名或懒加载配置，确保两个组件的chunkName（app.settings.summary和app.settings）无冲突。

3. 确认父组件路由视图无异常 #

检查SettingsSummaryPage.vue（你描述中写的SettingsSummary.vue应为笔误）中的<router-view>是否正确渲染，确保没有CSS样式遮挡或组件嵌套错误。你的当前模板结构是正确的，只需确认文件名称与路由导入一致即可。

内容的提问来源于stack exchange，提问作者Damon