Vue.js路由渲染报错：小型SPA路由树结构构建问题求助

看起来你是想把Full.vue作为全局布局组件，让所有页面内容都嵌套在它的导航和页脚之间，同时还要处理USER路由的子路由嵌套。下面是一步步的解决方案：

1. 调整路由配置结构 #

首先要把Full.vue设置为父路由组件，所有其他路由都作为它的children子路由。这样所有匹配的路由都会在Full.vue内部渲染：

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Full from '@/components/Full.vue'
import Home from '@/components/Home.vue'
import User from '@/components/User.vue'
import UserProfile from '@/components/UserProfile.vue'
import UserSettings from '@/components/UserSettings.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Full,
    // 所有需要在Full.vue内渲染的路由都放在children里
    children: [
      // 默认首页：访问/时，Full.vue的router-view渲染Home
      { path: '', component: Home },
      // USER主路由，它自己也有子路由
      {
        path: 'user',
        component: User,
        // USER的子路由，会渲染在User.vue的router-view里
        children: [
          { path: 'profile', component: UserProfile },
          { path: 'settings', component: UserSettings }
        ]
      },
      // 其他路由比如/about也加在这里
      { path: 'about', component: () => import('@/components/About.vue') }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

⚠️ 注意：子路由的path不要以/开头，否则会变成绝对路径，脱离父路由的嵌套结构。

2. 确保Full.vue包含<router-view> #

Full.vue作为布局父组件，必须要有<router-view>标签，用来渲染子路由对应的页面内容。把导航和页脚放在这个标签的上下方：

<!-- Full.vue -->
<template>
  <div class="full-container">
    <!-- 导航子组件 -->
    <NavigationBar />
    <!-- 核心内容区：子路由组件会在这里渲染 -->
    <div class="page-content">
      <router-view />
    </div>
    <!-- 页脚子组件 -->
    <PageFooter />
  </div>
</template>

<script>
import NavigationBar from './NavigationBar.vue'
import PageFooter from './PageFooter.vue'

export default {
  components: {
    NavigationBar,
    PageFooter
  }
}
</script>

3. 处理USER路由的子路由 #

如果USER路由下还有子路由（比如/profile、/settings），那么User.vue本身也需要一个<router-view>，用来渲染它的子组件：

<!-- User.vue -->
<template>
  <div class="user-page">
    <h1>用户中心</h1>
    <!-- USER页面的导航 -->
    <div class="user-nav">
      <router-link to="/user/profile">个人资料</router-link>
      <router-link to="/user/settings">账户设置</router-link>
    </div>
    <!-- USER的子路由组件会在这里渲染 -->
    <div class="user-content">
      <router-view />
    </div>
  </div>
</template>

常见问题排查 #

• 如果子路由内容不显示：检查父路由是否正确配置了children数组，且子路由path没有加开头的/。
• 如果Full.vue的导航/页脚不显示：确认根路由的component是Full.vue，而不是直接把Home等组件放在根级别。
• 如果USER子路由不渲染：确认User.vue内部有<router-view>标签，且路由配置中User的children数组正确。

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