Почему vue-router с дочерним элементом отрабатывает один и тот же компонент?

Question

[Игорь Безлепкин]

Привет! Какая то странная фигня. vue-router с дочерним элементов отрабатывает родительский компонент.

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
}

что по /events - EventPage
что по /events/map/1 - EventPage

Answer 1

[Serega_SRG]

В родительском элементе установлен <router-view>?
https://router.vuejs.org/ru/guide/essentials/neste...

Comments

[Игорь Безлепкин]

Он установлен в App.vue. Сейчас я установил и в родительский, заработало.

Answer 2

[Klein Maximus]

Родительский компонент будет так же "отработан" при смене роута, как и дочерний - https://router.vuejs.org/ru/guide/essentials/neste...
Если Вам нужно, чтобы по /events показывался родительский EventPage, а по /events/map/1 только EventMapPage, то нужно изменить настройки роутера:

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