2019-09-04 解决 vue-router 无法展示子级

问题复述：

在确保路由引用的组件路径正确的情况下，项目中我按照官网添加children，想要用vue-router去进行二级路由，但输入
http://localhost:8080/first/recommand 路由能正常跳转，但展示的却是first组件的内容，而不是recommand组件的内容。

router配置代码如下：

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

解决办法：

很正常的配置，看起来并没有什么明显的问题，但往往是因为自己的疏忽。。。。起初以为是配置项配置错了，一番各种排查搜索后才发现可能是因为router依赖router-view的问题，于是去查看了 First 这个组件，发现Firs组件并没有提供router-view这个标签给子路由进行展示，于是在First 组件里加了<router-view></router-view>保存好后这时候展示正常了。

总结：

以二级路由为鉴，不管多少级下的路由要是能正常跳转，但无法正常展示路由的内容，多半也是因为这个原因。
谨以此记录踩坑过程，避免再次踩坑。。。

搜索到有用的参考资料（被我拿来做了案例，真实情况的路由是多级路由不易理解）：https://segmentfault.com/q/1010000011241741