Vue.js 当用户在嵌套路由中时激活链接

I'm trying to give the specific link "Event" an active class when visiting a nested view link.
For example /event/TER63D/tickets but that doesn't seem to work with the standard vue router. I've found some solutions but these seem to be for older versions or simply don't work.

应用导航模板

<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",
  },
];

100

我让它以我想要的方式工作，但我不知道这是不是正确的方式.我对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",
  },
];