我配置好了vue-router,点击链接，浏览器地址更改了，但是页面没有渲染出来

Question

我配置好了vue-router,点击链接，浏览器地址更改了，但是页面没有渲染出来
main.js代码如下：

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

Vue.use(VueRouter)
Vue.use(Element)

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]
const router = new VueRouter(routes)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

App.vue代码如下：

<template>
  <div class="app">
      <p>
          <router-link to="/foo">Go to Foo</router-link>
      <router-link to="/bar">Go to Bar</router-link>
    </p>
    <router-view></router-view>
    </div>
</template>

我npm run dev 启动项目，在页面中显示出来了，两个链接，当我点击这两个链接后，页面并没有被正确显示出来，项目也没有报错，这个是为什么

Answer 1

创建 router 是这样的：

const router = new VueRouter({
    routes,
})