如何使用NuxtLink实现带UUID参数的动态嵌套页面跳转？

你可以通过以下几种方式实现正确跳转，避免生成错误的嵌套路径：

方法1：利用当前路由参数拼接绝对路径 #

直接通过$route.params获取当前页面的websiteId和appId，拼接成完整的绝对路径：

<NuxtLink :to="`/websites/${$route.params.websiteId}/apps/${$route.params.appId}/settings`">
  跳转到设置页面
</NuxtLink>

这种方式基于根路径构建目标URL，完全不会出现相对路径导致的嵌套错误，是最直接可靠的方案。

方法2：使用命名路由（推荐） #

先在nuxt.config.js中给目标路由配置名称：

export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'website-app-settings',
        path: '/websites/:websiteId/apps/:appId/settings',
        component: resolve(__dirname, 'pages/websites/_websiteId/apps/_appId/settings.vue')
      })
    }
  }
}

然后跳转时通过路由名称和参数匹配：

<NuxtLink :to="{ name: 'website-app-settings', params: { websiteId: $route.params.websiteId, appId: $route.params.appId } }">
  跳转到设置页面
</NuxtLink>

命名路由的优势在于，即使后续路径结构调整，只要路由名称不变，跳转逻辑无需修改，维护性更强。

方法3：使用相对上级路径（慎用） #

如果当前页面和目标页面是同级路由，可以用../返回上级目录再跳转：

<NuxtLink to="../settings">跳转到设置页面</NuxtLink>

但这种方式依赖路由层级结构，一旦页面嵌套深度变化，../的数量需要调整，容易出错，仅适合简单固定的路由场景。

内容的提问来源于stack exchange，提问作者Charlotte Wells