Vue Router报错：TypeError: Cannot read property '$createElement' of undefined

兄弟，我刚入门Vue的时候也踩过一模一样的嵌套路由坑！搜半天找不到问题真的急人，咱们一步步来排查，大概率是某个细节没注意到：

• 检查嵌套路由的配置结构
  父路由必须通过children数组定义子路由，而且子路由的路径要使用相对路径（不要开头加/），否则会被当成根路由匹配。举个正确的例子：

  const routes = [
    {
      path: '/parent-page',
      component: ParentPage,
      // 子路由必须放在children数组里
      children: [
        // 这里path不要写'/child'，要写'child'
        { path: 'target-child', component: YourProblemComponent }
      ]
    }
  ]
  

• 确认父组件里存在<router-view>
  嵌套的子组件是渲染在父组件的<router-view>标签里的，如果父组件模板里漏了这个标签，子组件根本没地方显示。比如父组件的模板得有：

  <template>
    <div class="parent-container">
      <!-- 父组件内容 -->
      <h1>我是父组件</h1>
      <!-- 子组件会渲染在这里 -->
      <router-view></router-view>
    </div>
  </template>
  

• 检查组件的导入与拼写
  有没有可能是组件文件路径写错了？比如大小写不匹配（部分开发环境对文件路径大小写敏感），或者import的时候拼写错误？比如：

  // 错误：路径拼写错了
  import YourProblemComponent from '../components/YourComponet.vue'
  // 正确：要和文件名完全一致
  import YourProblemComponent from '../components/YourProblemComponent.vue'
  

• 查看浏览器控制台的报错信息
  打开F12的Console面板，有没有报错？比如Failed to mount component: template or render function not defined或者Cannot find module '../xxx.vue'，这些报错信息是定位问题的关键，别忽略了。

• 确认路由跳转的路径是否正确
  如果是通过router.push跳转，是不是跳错了路径？比如应该跳/parent-page/target-child，而不是直接/target-child；如果用路由名称跳转，有没有给子路由设置name属性？

我当初就是把子路由的路径多加了个/，折腾了快俩小时才发现😂，你对着这几点挨个排查，应该能找到问题！

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