Почему VueRouter 4 не определяет linkActiveClass на маршруте?

Question

[Евгений]

Небольшой проект мигрирует с Vue 2.x версии на 3.x.
Наблюдаю небольшую проблему (или я что то упусти и не могу найти) новый параметр или настройку в VueRouter 4.x

Почему-то на внутренних маршрутах не помечается класс "linkActiveClass" (неточное вхождение). Причем сами глобальные настройки если поменять (название классов к примеру) - они отрабатывают, но сами ссылки помечаются только router-link-exact-active классом.

Update:

• вот рабочий пример на Vue2 codesandbox.io
  
• вот точно такой же пример на Vue3 codesandbox.io, но уже не работает
  

Поясняю: что ссылки которые имеют не точное вхождение не помечаются классом.

Comments

[Евгений]

Добавил примеры на codesandbox.io.

Answer 1

[Олег Десятников]

Я сделал так, в компоненте sidebar написал этот код:

<router-link to="/tasks" custom v-slot="{ href, navigate, isActive, isExactActive }">
	<li>
		<a
			class="nav-link text-white"
			:class="{
				'active-exact': isExactActive,
				'active': isActive || subIsActive('/tasks')
			}"
			:href="href"
			@click="navigate"
		>
			Задачи
		</a>
	</li>
</router-link>

В методах этот:

methods: {
	subIsActive(input) {
		const paths = Array.isArray(input) ? input : [input]
		return paths.some(path => {
			return this.$route.path.indexOf(path) === 0 //текущий путь начинается с этой строки
		})
	}
}