Ruta en Vue. La URL se actualiza, pero el contenido de la página de inicio de sesión siempre está consistente con la página / .

El contenido del programa se muestra en la figura. El archivo de configuración de enrutamiento está en el archivo index.js en la ruta. Como resultado, la URL ha cambiado, pero la página siempre ha sido coherente con la página principal. Probé muchos métodos y me llevó una tarde resolverlo.
Soy un principiante. Espero que no se rían de mí y puedan ayudarme a resolver mis problemas. Gracias.

app.vue:

<template>
  <div id="app">
    Componente raíz
    <router-link to="/login">Ir a login</router-link>
    <router-view></router-view>
  </div>
</template>

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

<style>

</style>

login.vue

<template>
    <div>
        Componente 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' , component: 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')

Estructura de archivos:
Ver