使用vue-router router-view 组件无法加载组件？

Question

APP.vue

<template>
<div id="app">
  <navigator></navigator>
  <router-view></router-view>
  <foot></foot>
</div>
</template>

<script>
import Navigator from './components/Navigator.vue'
import Foot from './components/Footer'
export default {
  name: 'app',
  components: {
    Navigator,
    Foot
  }
}
</script>

main.js

import Vue from 'vue'
import App from './App'
import 'normalize.css'
import Router from 'vue-router'
import Home from './components/Home.vue'
import Guests from './components/Guests.vue'
import Introduction from './components/Introduction.vue'
import Workshop from './components/Workshop'

Vue.use(Router)
const routes = [
  {
    path: '/',
    component: Home
  }, {
    path: '/guests',
    component: Guests
  }, {
    path: '/introduction',
    component: Introduction
  }, {
    path: '/workshop',
    component: Workshop
  }
]
const router = new Router(routes)
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

但是页面上router-view那块始终都没有东西，请问是怎么回事？

Answer 1

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

改成这样就好了。router构造函数里传入对象

Answer 2

你的默认路由初始是Home 组件，你调用组件的时候写到App 组件里了，建议你检查下路由和组件是否对应，

Answer 3

路由管里没有引入App.vue，应该把Home的路径换成App.vue

Answer 4

    //你可以试试样new 
    
    new Vue({
        el:'#app',
        router,
        render: h => h(App)
    })

Answer 5

在Router这个构造函数里面，应该传一个对象，routes现在是个数组。

const router = new Router(routes)

Answer 6

想请问楼主解决了吗，我现在也遇到同样的问题

Answer 7

楼主解决了吗，我也是遇到这种问题，既不报错，也不渲染。已经想了一个下午了，还是没有找到原因

Answer 8

const router = new Router(routes)，这里错了，应该是const router = new Router({routes})

Answer 9

也遇见了这样的问题

Answer 10

new 的时候，是 routes，而不是 routers。我被坑惨了，查了半天。