【大坑】router-view 无渲染，无报错

整个小 demo 添加 router-view 以后页面无渲染，无报错，疯狂网络搜索以后发现 component 拼写错，白白浪费时间……总结搜索结果如下：

1、检查书写

（1）routes

可能误写为 router，应该是 routes

export default new VueRouter({
  routes:[] //不是 router
})

（2）component

router 中 component不要和组件注册的 components 搞混，单词不要拼写错

  routes:[
    {
      path:'/home',
      component:Home //不要和组件注册的 components 搞混
    }
  ]

（3）其他

单词大小写、字母都别写错咯！！！括号和引号都用对！！！记得逗号隔开！！！

2、检查组件

（1）router-view

记得在父组件添加<router-view/>

<template>
      <div class="article">
        <router-view/> //必须存在的标签，没有还渲染个寂寞
      </div>
</template>

（2）路由跳级

嵌套路由时每个component都要添加，否则导致自身及其子组件无法显示

   routes:{
	   path:'/',
	   component:Father,
	   children:[
		   path:'son',
		   //component:Son //组件没显示导致路由跳级，相当于/路径下没有 router-view 来展示 Son 组件
		   children:[
			   path:'grandson',
			   component:Grandson //父组件 Son 没有展示，其子组件也不会展示
		   ]
	   ]
	}