vue-router应用于组件内时的矛盾怎么解决

先是入口点 main.js
import App from './components/App.vue'
router.start(App, '#app')
然后在App.vue 也就是根组件里面声明router-view
   

　　我使用的是vue-cli构建的项目，它结合了webpack可以很方便地使用.vue的单文件组件，非常方便，现在想使用vue-router来做前端路由及组件切换，目前是在html中引用了入口js，入口js的用途是引用根组件App.vue，我希望在App.vue里面使用vue-router，于是在App.vue文件的template标签内加入了，template标签内容如下：
　　
　　遇到的问题是：
　　1、如果在App.vue组件ready之前使用Vue.use(VueRouter)，在ready后使用router.start(App_body, '#app')，那么会报错“[vue-router] can only be used inside a router-enabled app.”我猜测是因为App.vue组件并未编译完成，自然在template里面的就找不到了，所以在ready之前注册vue-router报这个错。
　　2、如果在组件ready后使用Vue.use(VueRouter)和router.start(App_body, '#app')，那么会报错“[Vue warn]: Unknown custom element: – did you register the component correctlyhttp://www.toprealgroup.com/web/? For recursive components, make sure to provide the "name" option.”我猜测是因为App.vue组件ready之前，发现template中有组件，而这个组件还没有被注册

先是入口点 main.js
import App from './components/App.vue'
router.start(App, '#app')
然后在App.vue 也就是根组件里面声明router-view