路线Vue. URL刷新，但内容登录的页面是一致的，与/page

节目内容是图所示。 路由选择配置文件是在index.js 文件的路线。 结果，该网址已变更，但是页面一直是符合根页。 我试了很多方法，和它采取了一个下午来解决。 我是个初学者。 我希望你不要嘲笑我，可以帮助我解决我的问题。 谢谢你

应用程序。vue:

 <template>
  <div id="app">
     root组件
    <router-link to="/login"> to login</router-link>
    <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'app'
}
</script>

<style>

</style>

登录。vue

<template>
    <div>
        login组件
    </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>

</style>

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import login from '../components/login.vue'


Vue.use(VueRouter)

const routes = [
  { path: '/login' , compoment: login}

]

const router =  new VueRouter ({
  routes
})

export default router

main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'


import './plugins/element.js'

Vue.config.productionTip = false

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

文件的结构： 该图像描述这里