Маршрут в Vue. URL-адрес обновляется, но содержимое страницы входа в систему всегда соответствует странице /

Содержание программы показано на рисунке. Файл конфигурации маршрутизации находится в index.js файл в маршруте. В результате URL-адрес изменился, но страница всегда соответствовала корневой странице. Я перепробовал множество методов, и мне потребовался целый день, чтобы решить эту проблему. Я новичок. Я надеюсь, что вы не будете смеяться надо мной и сможете помочь мне решить мои проблемы. Спасибо

приложение.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')

Структура файла: введите описание изображения здесь