webpack+vue2.0+router 嵌套路由报错?

Question

完整代码地址：https://github.com/tuihou1233...

想要访问的路由地址：
访问 http://localhost:8081/#/index...

app.vue

<template>
  <div id="app">
    <h3>我是app.vue</h3>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

路由配置：
router.js

/* 设置整个APP的路由*/

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import Index from '../views/index.vue'
import Rage from '../views/rage.vue'

const router=new VueRouter({
routes:[{
path:'/index',
component:Index,
children:[
{
path:'rage',
component:Rage
}
]
},{
path:"*",redirect:'/index/rage'
}]
})

export default router

报错的关键是在这个页面出现的：index.vue

<template>
    <div>
       <h3>我是index页面</h3>
    </div>
    <!--打开下面注释后，页面报错-->
    <!--<div>-->
        <!--<keep-alive>-->
            <!--<router-view></router-view>-->
        <!--</keep-alive>-->
    <!--</div>-->
</template>

rage.vue

<template>
    <div>
       <h3>我是rage页面</h3>
    </div>
</template>

Answer 1

首先，要明白，template下面只能有一个父元素
去掉注释，template下面就有两个平级的元素（两个父元素）

Answer 2

template 下面只能存在一个父级元素标签