有关vue-router和vue.js使用

Question

vue小白想请教下vue-router和vue.js共同使用的问题，假如html代码如下：

<div id="app">
    <div class="container">
        <router-view></router-view>
    </div>
    <template id="body1">
        <div class="container">
            <h1>body1</h1>
        </div>
    </template>
    <template id="body2">
        <div class="container">
            <h1>body2</h1>
        </div>
    </template>
    <template id="body3">
        <div class="container">
            <h1>body3</h1>
        </div>
    </template>
</div>

如果使用vue-router来进行路由控制，则需要：

var App = Vue.extend({})
router.start(App, '#app')

同时还想在整个页面中使用vue双向数据绑定，还需要：

var vm = new Vue({
    el: '#app'
})

但是这样实际上是会报错的，提示<router-view>不可以在此处使用。
如果把初始化vm实例的 new Vue 去掉，只使用：

var App = Vue.extend({})
router.start(App, '#app')

则页面可以进行正常显示，vue可以正常使用。但是此时该在何处定义data、method来使用双向绑定？
vue和router在初始化的时候，传入的'#app'这个范围有怎样的限定？
谢谢各位！

Answer 1

入口的js文件：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from 'App.vue'     // 你的根组件，模版放在这里面
import { configRouter } from './config_router.js'    // 路由的配置文件

Vue.use(VueRouter)

var router = new VueRouter()
configRouter(router)
router.start(App, 'app')

Answer 2

var App = Vue.extend({})

同学你传进去的是一个空对象啊，把你要绑定的data传进去就行了呗，具体看这里

Answer 3

https://github.com/holidaying...
是可以避免的，请看demo