vue-router无法实现二级路由

Question

按照官网添加children，想要用vue-router去进行二级路由，但输入
http://localhost:8080/first/recommand返回的却是first组件，而不是recommand组件

index.js：

import Vue from 'vue'
import Router from 'vue-router'
import First from '../page/firstPage.vue'
import recommand from '../page/recommandPage.vue'

Vue.use(Router)
const routes =[
  {path: '/first', component: First,
    children:[
      {path:'recommand', component:recommand}
      ]
  },
]
const router = new Router({
  mode:'history',
  routes:routes
})
export default router

Answer 1

二级路由也会显示上一级的component

你输入的 http://localhost:8080/first/recommand
是显示first组件，first组件中的 router-view 来显示 recommend 组件

Answer 2

在first组件里面需要添加<router-view></router-view>标签来显示recommend组件

Answer 3

一楼二楼说的都不错，我在锦上添花加个官方例子吧。
二级页面