Vue JS嵌套路由子组件不显示问题求助

嘿，我之前折腾Vue嵌套路由的时候也踩过几乎一模一样的坑，来帮你一步步排查解决！

先搞定脚本未找到的问题 #

你现在用的unpkg链接可能存在版本匹配问题——Vue 2和Vue 3的路由库写法差异很大，默认链接可能指向最新的Vue 3版本，但你的代码看起来是Vue 2的风格。建议把脚本改成指定版本的稳定链接，避免加载错误：

<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>

这样能确保Vue和Vue Router版本完全匹配，不会出现脚本找不到或者语法不兼容的情况。

再排查嵌套路由的核心问题 #

子组件不显示大概率是路由配置或视图放置的问题，给你列几个必查点：

1. 子路由路径不要加前置斜杠 #

嵌套路由的子路径应该是相对路径，不要加/，否则会变成绝对路径，直接脱离父路由的嵌套关系。比如你的路由配置应该改成这样：

const router = new VueRouter({
  routes: [
    {
      path: '/events',
      // 注意是components复数，对应多组件渲染
      components: {
        default: Event,
        sidebar: EventSidebar
      },
      children: [
        // 子路径不要加/，最终访问路径是/events/list
        { path: 'list', component: EventList },
        { path: 'create', component: EventCreate }
      ]
    }
  ]
})

2. 父组件必须保留<router-view>容器 #

你的Event.vue里已经加了<router-view />，但要确保它放在正确的位置——这个标签就是子组件的渲染容器，绝对不能丢。另外，router-link的跳转路径要写全嵌套路径：

<!-- Event.vue 示例代码 -->
<template>
  <div class="event-container">
    <h1>Events主页面</h1>
    <!-- 跳转路径要写完整的嵌套路径 -->
    <router-link to="/events/list">查看事件列表</router-link>
    <router-link to="/events/create">创建新事件</router-link>
    
    <!-- 子组件会渲染在这个标签的位置 -->
    <router-view />
    
    <!-- 侧边栏组件的渲染容器 -->
    <router-view name="sidebar" />
  </div>
</template>

3. 确认App.vue的根视图正常工作 #

App.vue里的<router-view />是用来渲染根路由组件（比如你的Event组件）的，只要它没有被其他元素遮挡或隐藏，这部分就没问题。

最后验证步骤 #

1. 替换成指定版本的Vue和Vue Router脚本
2. 修正子路由的路径写法（去掉前置斜杠）
3. 检查router-link的跳转路径是否为完整嵌套路径
4. 确认父组件里的<router-view>存在且位置合理

做完这些，点击链接应该就能正常显示子组件了！

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