Nuxt3动态参数子路由active-class失效，如何保留[slug].vue路由？

方法一：自定义NuxtLink激活判断逻辑 #

无需修改路由或页面结构，直接在导航的NuxtLink组件中手动控制激活类的触发条件：

<NuxtLink
  to="/workshops"
  custom
  v-slot="{ isActive, isExactActive }"
>
  <a 
    :class="{ 
      'active-link': isActive || isExactActive || $route.path.startsWith('/workshops/') 
    }"
  >
    工作坊
  </a>
</NuxtLink>

通过$route.path.startsWith('/workshops/')判断当前路由是否属于/workshops的子路径，结合原生的isActive和isExactActive状态，确保/workshops本身及所有子路由都能触发激活类。

方法二：扩展路由配置建立父子路由关系 #

如果希望遵循Nuxt原生路由激活逻辑，可通过pages:extend钩子调整路由结构，将/workshops子路由挂载到[slug].vue对应的路由下：

1. 在nuxt.config.ts中添加路由扩展配置：

export default defineNuxtConfig({
  hooks: {
    'pages:extend'(routes) {
      // 定位根目录[slug].vue对应的路由
      const slugRoute = routes.find(r => r.name === 'slug');
      // 定位/workshops/[workshop].vue对应的路由
      const workshopSubRoute = routes.find(r => r.name === 'workshops-workshop');

      if (slugRoute && workshopSubRoute) {
        // 将子路由挂载到/workshops路由下
        slugRoute.children = [
          {
            ...workshopSubRoute,
            path: ':workshop'
          }
        ];
        // 移除原独立子路由条目
        const subRouteIndex = routes.indexOf(workshopSubRoute);
        if (subRouteIndex !== -1) {
          routes.splice(subRouteIndex, 1);
        }
      }
    }
  }
});

2. 导航中使用原生NuxtLink即可：

<NuxtLink to="/workshops" active-class="active-link">
  工作坊
</NuxtLink>

此时访问/workshops/workshop-1时，父路由的active-link类会自动生效，同时/workshops路径仍由根目录的[slug].vue处理。

内容的提问来源于stack exchange，提问作者Miguel Stevens