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

tuihou123321
  • 348

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

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

clipboard.png

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>
回复
阅读 1.5k
2 个回答
✓ 已被采纳

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

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

你知道吗?

宣传栏