关于网友提出的“ (vue.js)页面上用vue-router，如何显示对应的组件？
”问题疑问，本网通过在网上对“ (vue.js)页面上用vue-router，如何显示对应的组件？
”有关的相关答案进行了整理，供用户进行参考，详细问题解答如下：

问题： (vue.js)页面上用vue-router，如何显示对应的组件？
描述:

这是html

    



  
Hello App!
  


    Go to Foo
    Go to Bar
  

  

这是入口文件

import Vue from 'vue';
import VueRouter from 'vue-router';
import {Footers} from './src/component/footers.vue';
import {Headers} from './src/component/headers.vue';
Vue.use(VueRouter);

// 路由器需要一个根组件。
// 出于演示的目的，这里使用一个空的组件，直接使用 HTML 作为应用的模板
var App = Vue.extend({})

// 创建一个路由器实例
// 创建实例时可以传入配置参数进行定制，为保持简单，这里使用默认配置
var router = new VueRouter()

// 定义路由规则
// 每条路由规则应该映射到一个组件。这里的“组件”可以是一个使用 Vue.extend
// 创建的组件构造函数，也可以是一个组件选项对象。
// 稍后我们会讲解嵌套路由
router.map({
    '/foo': {
        component:Headers
    },
    '/bar': {
        component:Footers
    }
})

// 现在我们可以启动应用了！
// 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。
router.start(App, '#app')

这是其中一个组件

打包成bundle之后，我点击链接，路由起作用了，但是组件没显示出来啊？这是怎么回事啊

---

解决方案1:

Vue开发者工具：vuejs-devtools
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd