Vue框架内容无法正常显示

在学习 Vue 框架路由一节是，出现了如下问题，在创建了组件和路由对象，页面无法正常显示，代码如下：

解决方法：
出现这个问题之前一直没有注意到，解决方法是将组件代码和路由对象代码互换位置，将创建组件的代码放在创建路由对象代码之上，就可以正常显示了。至于为什么是这样，我还没有搞清，希望有大佬能评论给我讲解，笔芯~