为什么 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:

都没有显示任何东西

编辑

我尝试访问此 link：

http://0.0.0.0:8081/Home.vue

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

Cannot GET /Home.vue

Answer 1

您可以尝试使用 URL

访问吗

http://0.0.0.0:8081/Home.vue

http://0.0.0.0:8081/helloworld.vue

问候，

拉古

Answer 2

将routers更改为routes

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

为什么 vue-router 不工作？

Why the vue-router do not work?

vue.js

vue-router