Rota no Vue. O URL é atualizado, mas o conteúdo da página de início de sessão sempre é consistente com o página /

O conteúdo do programa é mostrado na figura. O roteamento é o arquivo de configuração no index.js arquivo do percurso. Como resultado, a URL foi alterada, mas a página foi sempre consistente com a página raiz. Eu tentei vários métodos, e levou uma tarde para resolvê-lo. Eu sou um novato. Eu espero que você não se riam de mim e pode me ajudar a resolver meus problemas. Obrigado

app.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>

início de sessão.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')

Estrutura do arquivo: insira a descrição da imagem aqui