Why does vue-router with child render the same component?

Question

Vue.js

Hey! What a weird bullshit. vue-router with a child element handles the parent component.

import EventPage from '@/pages/event/index.vue'
import EventMapPage from '@/pages/event/map.vue'

const routes = {
  path: '/events',
  component: EventPage,
  children: [
    {
      path: 'map/:id',
      component: EventMapPage
    }
  ]
}

export default {
  routes
}

according to /events - EventPage
what according to /events/map/1 - EventPage

Answer 1

Is ? set on the parent element <router-view>?
https://router.vuejs.org/ru/guide/essentials/neste...

Answer 2

The parent component will be "worked out" in the same way when the route is changed, as well as the child - https : //router.vuejs.org/en/guide/essentials/neste...
/events/map/1 only EventMapPage, then you need to change the router settings:

const routes = [
  {
    path: '/events/map/:id',
    component: EventMapPage
  },
  {
    path: '/events',
    component: EventPage,
  },
];