Vue Router嵌套路由下如何为父级导航链接添加激活类

我想在访问嵌套视图链接（比如/event/TER63D/tickets）时，给"Event"导航链接加上active类，但标准Vue Router默认做不到这点。找了些解决方案，要么适配旧版本，要么完全没用。

原始应用导航模板 #

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/event">Event</router-link> <!-- 访问/event/TER63D/tickets时希望这个链接有active类 -->
  </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(.*)", // 未识别的路径自动匹配404
    redirect: "/404",
  },
];

更新：我自己实现了效果，但不确定是否正确（我是Vue新手） #

以下是修改后的代码：

更新后的应用导航模板 #

<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> <!-- 访问/event/TER63D/tickets时希望这个链接有active类 -->
  </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(.*)", // 未识别的路径自动匹配404
    redirect: "/404",
  },
];

你的解法是否正确？ #

你的实现是可行的，但Vue Router本身提供了更简洁的内置方案，不需要手动监听路由变化：

方案1：利用router-link内置匹配类 #

Vue Router的router-link默认会给非精确匹配的路由添加router-link-active类，给精确匹配的路由添加router-link-exact-active类。你可以直接利用这个特性，不用手动写判断：

<!-- 直接指定激活类，自动匹配所有/event/*路径 -->
<router-link to="/event" active-class="active">Event</router-link>

如果你的样式依赖router-link-exact-active类，也可以调整，但这里用非精确匹配的router-link-active语义更准确。

方案2：通过$route.matched灵活判断 #

如果需要自定义匹配逻辑，可以直接在模板里用$route.matched检查当前路由是否包含目标父路由：

<router-link 
  to="/event" 
  :class="$route.matched.some(item => item.name === 'event') ? 'active' : ''"
>Event</router-link>

这种方式不需要依赖路由名称的命名格式，也不用手动监听路由，更符合Vue响应式特性。

对你当前实现的评价 #

你的写法能实现需求，但有几个小问题：

1. 依赖路由名称的父级.子级命名格式，后续修改路由名称时需要同步调整判断逻辑；
2. 手动监听路由并分割名称，不如Vue Router内置方法简洁；
3. 直接绑定router-link-exact-active类，这个类原本是给精确匹配用的，语义上不太准确，建议用默认的router-link-active或自定义active类。

内容的提问来源于stack exchange，提问作者Ben Jerry