Vue Router子路由不显示求助：访问/account/orders未渲染目标组件

问题原因 #

你遇到的核心问题有两个：

1. 父组件缺少子路由渲染出口
   访问/account/orders时，Vue Router会先渲染父路由的AccountProfile组件，但你的AccountProfile里没有添加<router-view>标签——这是子路由组件的挂载入口，没有它的话，子组件OrderHistory根本没有地方显示，页面自然只会展示父组件内容。

2. 父路由配置逻辑混淆
   当前父路由/account直接绑定了AccountProfile组件，同时又作为子路由的容器。这种配置下，/account路径会显示AccountProfile，而/account/orders需要在AccountProfile内部嵌套显示子组件，所以必须有<router-view>支撑；如果你的需求是/account和/account/orders是同级的独立页面，那当前的父子路由配置本身就不合理。

解决方案 #

根据你的需求选择对应的修改方式：

方式一：保留嵌套结构（/account/orders在AccountProfile内部显示） #

修改AccountProfile.vue，添加子路由渲染出口：

<template>
  <div class="account-container">
    <!-- 这里是你的账户信息原有内容 -->
    <div class="profile-info">
      <h2>个人信息</h2>
      <!-- ...其他个人信息内容 -->
    </div>
    <!-- 添加这行，让子路由组件在这里渲染 -->
    <router-view></router-view>
  </div>
</template>

方式二：将/account作为纯路由容器（/account和/account/orders为独立页面） #

1. 新建一个纯布局组件（比如AccountLayout.vue），只包含路由出口：

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

2. 修改路由配置，把AccountProfile改成父路由的默认子路由：

const routes = [
    {
        path: "/auth/login",
        beforeEnter: (to, from, next) => {
            useUserStore().user.id ? next({ name: "account.profile" }) : next()
        },
        name: "auth.login",
        component: Login,
    },
    {
        path: "/auth/register",
        beforeEnter: (to, from, next) => {
            useUserStore().user.id ? next({ name: "account.profile" }) : next()
        },
        name: "auth.register",
        component: Register,
    },
    {
        path: "/account",
        beforeEnter: (to, from, next) => {
            useUserStore().user.id ? next() : next({ name: 'auth.login' })
        },
        component: () => import('./AccountLayout.vue'), // 使用纯布局组件
        children: [
            {
                path: "", // 空路径对应/account，作为默认页面
                name: "account.profile",
                component: AccountProfile,
            },
            {
                path: "orders",
                name: "account.orders",
                component: OrderHistory,
            }
        ]
    }
];

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