如果包装在组件中，vue路由器视图将不起作用

Question

更新：

在清除浏览器缓存后，它神奇地开始工作，不知道以前发生了什么。

---

我想知道如何在组件中包含路由器视图而不是直接使用它吗？

例如：

main.js

import Vue from 'vue'
import router from "./router"
import App from './App.vue'


new Vue({
  el: '#app',
  render: h => h(App),
  router
})

App.vue

<template>
  <div>
    <page-content></page-content>
  </div>
</template>

<script>
  import pageContent from "./page-content.vue";

  export default {
    name: 'app',
    data() { return {}; },
    components: {
      "page-content": pageContent
    }
  }
</script>

page-content.vue

<template>
    <div class="page-content">
        <router-view>
        </router-view>      
    </div>
</template>

<script>
    export default {
    }
</script>

router.js

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

const routes = [{ path: '/', component: Foo }]

export default new VueRouter({
  routes
})

问题是我看不到页面上显示 foo