如何在Nuxt.js中实现动态用户名URL，兼容两种Profile路由？

需求说明 #

需实现两个路由场景：

• 通用个人主页：http://localhost:3001/profile
• 带动态用户名的个人主页：http://localhost:3001/profile/@user（@user为动态用户名参数）

涉及页面文件：

• pages/profile.vue
• pages/_username.vue

具体实现步骤 #

1. 调整页面目录结构 #

Nuxt路由基于pages目录自动生成，要让动态路由归属到/profile路径下，需调整文件结构：

• 创建pages/profile目录
• 将原pages/profile.vue移动到pages/profile/index.vue，此文件对应/profile路由
• 将原pages/_username.vue移动到pages/profile/_username.vue，用于匹配/profile/@user类路径

2. 限制动态路由的匹配规则 #

默认_username.vue会匹配/profile/后的任意字符串，需确保仅匹配@开头的用户名，在nuxt.config.js中扩展路由规则：

export default {
  router: {
    extendRoutes(routes, resolve) {
      const targetRoute = routes.find(route => route.path === '/profile/:username')
      if (targetRoute) {
        // 正则限制仅匹配@开头的用户名，可根据需求调整\w+的范围
        targetRoute.path = '/profile/:username(@\\w+)'
      }
    }
  }
}

3. 页面逻辑处理 #

• 通用主页（pages/profile/index.vue）：直接编写当前登录用户的个人主页逻辑即可，比如展示用户基本信息、动态内容等。
• 动态用户主页（pages/profile/_username.vue）：获取并处理动态参数：

<template>
  <div class="user-profile">
    <h2>{{ targetUsername }}的主页</h2>
    <!-- 其他用户信息展示 -->
  </div>
</template>

<script>
export default {
  async asyncData({ params }) {
    // 从参数中拿到带@的用户名，去掉@符号用于接口请求
    const targetUsername = params.username.slice(1)
    // 可在此处请求用户信息接口
    // const userInfo = await fetchUserInfo(targetUsername)
    return { targetUsername }
  }
}
</script>

4. 路由跳转示例 #

• 跳转到通用个人主页：

<nuxt-link to="/profile">我的主页</nuxt-link>

• 跳转到指定用户主页：

<nuxt-link :to="`/profile/@${userName}`">{{ userName }}的主页</nuxt-link>

注意事项 #

• 若不添加路由正则限制，/profile/xxx（不带@）也会匹配到动态路由页面，正则规则可根据实际用户名格式调整。
• 若使用Nuxt 3，路由配置需改为在nuxt.config.ts中使用routeRules，或在页面通过definePageMeta定义匹配规则。

内容的提问来源于stack exchange，提问作者souhaib chadidi