为什么vue-router不起作用？

Question

在我的main.js中，我有router：

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

import HelloWorld from './components/HelloWorld.vue'
import Home from './components/Home.vue'


Vue.use(VueRouter)

// config the router
const router = new VueRouter({
  routers: [
    {path: '/home', component: Home},
    {path: '/helloworld', component: HelloWorld},
  ],
  mode: "history"
})

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

我的App.vue代码：

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

<script>


  export default {
    data: function() {
      return {
        helth: 100,
        ended: false
      }
    },

  }
</script>

<style scoped>

</style>

HelloWorld.vue：

<template>
  <div>
    Home
  </div>
</template>

<script>

  export default{
    data(){
      return {msg: 'hello vue'}
    },
    components: {}
  }
</script>

<style scoped>

</style>

HelloWorld.vue：

<template>
  <div>
    Hello World
  </div>
</template>

<script>

  export default{
    data(){
      return {msg: 'hello vue'}
    },
    components: {}
  }
</script>

<style scoped>

</style>

但在我的浏览器中，无论是x/home还是x/helloworld都没有显示任何内容：

修改

我尝试访问此链接：

http://0.0.0.0:8081/Home.vue

但是我的页面出现了以下错误：

  

无法获取/Home.vue

Answer 1

将routers更改为routes

const router = new VueRouter({
 routes: [ // <<< here
    {path: '/home', component: Home},
    {path: '/helloworld', component: HelloWorld},
  ],
  mode: "history"
})

Answer 2

您可以尝试使用网址

进行访问吗？

http://0.0.0.0:8081/Home.vue

http://0.0.0.0:8081/helloworld.vue

的问候，

Raghu