Активация ссылки, когда пользователь находится во вложенном маршрутизаторе

Я пытаюсь дать конкретной ссылке «Событие» активный класс при посещении вложенной ссылки просмотра. Например /event/TER63D/tickets, но, похоже, это не работает со стандартным маршрутизатором vue. Я нашел несколько решений, но они, похоже, для более старых версий или просто не работают.

Шаблон навигации приложения

<template>
  <nav>
    <router-link to = "/">Home</router-link> |
    <router-link to = "/about">About</router-link> |
    <router-link to = "/event">Event</router-link> (I want this to have the class "active" when visiting /event/TER63D/tickets) 
  </nav>
  <router-view />
</template>

Маршрутизатор

const routes = [
  {
    path: "/",
    name: "home",
    component: HomeView,
  },
  {
    path: "/event/:id",
    name: "eventlist",
    component: EventView,
    children: [
      {
        path: "tickets",
        component: TicketsView,
      },
      {
        path: "shop",
        component: ShopView,
      },
    ],
    props: true,
  },
  {
    path: "/404",
    name: "404",
    component: () => import("../views/NotFoundView.vue"),
  },
  {
    path: "/:catchAll(.*)", // Unrecognized path automatically matches 404
    redirect: "/404",
  },
];

UPDATE

Я заставляю его работать так, как хочу, но я не знаю, правильно ли это. Я очень новичок в VueJs.

Это обновленный код.

Шаблон навигации приложения

<template>
  <nav>
    <router-link to = "/">Home</router-link> |
    <router-link to = "/about">About</router-link> |
    <router-link :class = "currentlyActive[0] === 'event' ? 'router-link-exact-active' : ''" to = "/event">Event</router-link> (I want this to have the class "active" when visiting /event/TER63D/tickets) 
  </nav>
  <router-view />
</template>

<script>
export default {
  name: "AppView",
  data() {
    return {
      currentlyActive: "",
    };
  },
  watch: {
    $route(to) {
      this.currentlyActive = to.name.split(".");
    },
  },
};
</script>

Маршрутизатор

const routes = [
  {
    path: "/",
    name: "home",
    component: HomeView,
  },
  {
    path: "/event/:id",
    name: "event",
    component: EventView,
    children: [
      {
        path: "tickets",
        component: TicketsView,
        name: "event.tickets",
      },
      {
        path: "shop",
        component: ShopView,
        name: "event.shop",
      },
    ],
    props: true,
  },
  {
    path: "/404",
    name: "404",
    component: () => import("../views/NotFoundView.vue"),
  },
  {
    path: "/:catchAll(.*)", // Unrecognized path automatically matches 404
    redirect: "/404",
  },
];