Getting link active when user is in nested router-CodePudding

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.

App Nav Template

<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>

Router

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

I get it to work the way I want to, but i dont know if its the right way. I am very new to VueJs.

This is the updated code.

App Nav Template

<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>

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

Router

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

CodePudding user response：

You don't have event path and page in this structure.

you can add event route like bottom.

Router

const routes = [
  {
    path: "/",
    name: "home",
    component: HomeView,
  },
   {
      path: '/event',
      redirect: "/404", // or component: EventList,
      children: [
        {
          path: ":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",
  },
];

App Nav Template

<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>