Is my route active by design or am I using unintended side-effect?

[rogatty]

When upgrading to vue-router v4 I noticed the change in active / exact active behaviour. Previously, I had these routes:

{
  name: 'courses',
  path: 'courses',
  component: Courses,
},
{
  name: 'course-edit',
  path: 'courses/:id',
  component: CourseEditor,
  props: true,
}

And this link in the menu:

<router-link :to="{ name: 'courses' }">Courses</router-link>

In vue-router v3 the link was active when courses/1 was in the URL. In vue-router v4 it wasn't active anymore, so I've read https://github.com/vuejs/rfcs/blob/master/active-rfcs/0028-router-active-link.md and fixed it by making a simple change:

{
	path: 'courses',
	component: {
		render: (r) => r('router-view'),
	},
	children: [
		{
			name: 'courses',
			path: '',
			component: Courses,
		},
		{
			name: 'course-edit',
			path: ':id',
			component: CourseEditor,
			props: true,
		},
	],
}

There are similar examples in the RFC but none that would map 1:1 to my case. My concern is about the fact that I link to the child route with an empty path (name: 'courses'), and loading its sibling (name: 'course-edit') causes the link to be active. I'm not sure if this behavior is by design or an unintended side-effect that may break in the future without notice. @posva can you comment on that?

[posva]

This is by design as pointed out in the RFC examples. You can omit the component option completely on the path: 'courses' BTW. It should probably also be /courses instead if it's a root path

[rogatty]

Thank you for the reassurance! Seems like you're right about the component option, I had a wrong assumption based on another route. It's not a root path, I didn't want to paste 600 lines here. 🙂