Vue.js子路由无法渲染求助：学习子路由时代码失效

嘿，我来帮你搞定Vue Router子路由的问题！从你贴的代码片段来看，大概率是子路由的配置或者路由出口的设置出了问题，我给你梳理一下正确的实现方式，你可以对照着调整自己的代码：

你可以直接把这段代码保存成HTML文件，用浏览器打开测试效果：

<!DOCTYPE html>
<html>
<head>
  <title>Vue Router Sub-Routes Test</title>
  <script type="text/javascript" src="https://unpkg.com/vue"></script>
  <script type="text/javascript" src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
</head>
<body>
  <div id="app">
    <ul>
      <li><router-link to="/firstpage">First Page</router-link></li>
      <li><router-link to="/firstpage/sub1">First Sub Page 1</router-link></li>
      <li><router-link to="/firstpage/sub2">First Sub Page 2</router-link></li>
    </ul>
    <!-- 主路由出口：渲染父级路由组件 -->
    <router-view></router-view>
  </div>

  <script>
    // 定义两个子路由组件
    const SubComponent1 = {
      template: '<div>这是First Page的子路由1内容</div>'
    }
    const SubComponent2 = {
      template: '<div>这是First Page的子路由2内容</div>'
    }

    // 定义父路由组件，重点：里面必须包含子路由的出口<router-view>
    const FirstPage = {
      template: `
        <div>
          <h2>这是First Page的主内容</h2>
          <!-- 子路由出口：子组件会渲染在这里 -->
          <router-view></router-view>
        </div>
      `
    }

    // 路由规则配置：子路由要放在父路由的children数组里
    const routes = [
      {
        path: '/firstpage',
        component: FirstPage,
        // 子路由配置区
        children: [
          {
            // 注意：子路由的path不要加开头的斜杠，否则会变成根路径路由
            path: 'sub1',
            component: SubComponent1
          },
          {
            path: 'sub2',
            component: SubComponent2
          },
          // 可选：设置默认子路由，访问/firstpage时默认显示的内容
          {
            path: '',
            template: '<div>请选择一个子页面</div>'
          }
        ]
      }
    ]

    // 创建路由实例
    const router = new VueRouter({
      routes
    })

    // 挂载Vue实例和路由
    new Vue({
      el: '#app',
      router
    })
  </script>
</body>
</html>

• 父组件没加子路由出口：这是最容易犯的错误！父组件（比如示例里的FirstPage）必须包含<router-view></router-view>，否则子组件没有地方渲染，直接就看不到效果。
• 子路由path加了斜杠：如果子路由的path写成/sub1，它会被当成根路径下的独立路由，而不是/firstpage的子路由，所以一定要去掉开头的斜杠。
• 子路由放错位置：子路由必须写在对应父路由的children数组里，不能和父路由同级配置。
• router-link路径错误：访问子路由的完整路径应该是/父路由路径/子路由路径，比如/firstpage/sub1，不能直接写/sub1。

1. 把上面的代码保存成HTML文件，用浏览器打开。
2. 点击「First Page」，会看到父组件的主内容和默认的子提示。
3. 点击「First Sub Page 1」或「First Sub Page 2」，子组件的内容会自动渲染在父组件的子路由出口位置。

如果还有具体的报错信息或者代码细节没贴全，可以再补充说明，我再帮你排查~

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