如何在Nuxt.js中实现URL重写？将mywebsite/user/1转为mywebsite/user/alex

嘿，要在Nuxt里实现把mywebsite/user/1重写成mywebsite/user/alex的需求，其实分Nuxt 3和Nuxt 2两种场景，给你整理了几个实用方案：

Nuxt 3 实现方案 #

方法1：用内置的 Route Rules（最简单） #

Nuxt 3自带了路由规则配置，直接在nuxt.config.ts里加几行代码就行，适合固定路径的重定向：

export default defineNuxtConfig({
  routeRules: {
    // 永久重定向（301，适合SEO优化）
    '/user/1': { redirect: { to: '/user/alex', statusCode: 301 } },
    // 如果是临时跳转需求，改成302即可：
    // '/user/1': { redirect: { to: '/user/alex', statusCode: 302 } }
  }
})

配置完重启Nuxt就生效，零依赖超省心。

方法2：自定义服务端中间件（适合复杂逻辑） #

如果你的重写需求不是固定路径（比如需要根据数据库用户ID动态匹配用户名），可以写个服务端中间件：

1. 在项目根目录创建server/middleware/rewrite-user-path.ts文件
2. 写入以下代码：

export default defineEventHandler(event => {
  const path = event.node.req.url
  // 匹配固定的/user/1路径
  if (path === '/user/1') {
    return sendRedirect(event, '/user/alex', 301)
  }
  // 拓展：如果要动态匹配所有/user/:id，比如从数据库查用户名
  // const match = path.match(/^\/user\/(\d+)$/)
  // if (match) {
  //   const userId = match[1]
  //   // 替换成你的实际查询逻辑，比如getUsernameById(userId)
  //   const username = 'alex' 
  //   return sendRedirect(event, `/user/${username}`, 301)
  // }
})

Nuxt会自动加载这个中间件，所有请求都会经过它处理。

Nuxt 2 实现方案 #

方法1：使用官方重定向模块 #

Nuxt 2有个官方维护的@nuxtjs/redirect-module，配置简单：

1. 先安装模块：

npm install @nuxtjs/redirect-module
# 或者 yarn add @nuxtjs/redirect-module

2. 在nuxt.config.js里注册并配置：

export default {
  modules: [
    '@nuxtjs/redirect-module'
  ],
  redirect: [
    {
      from: '/user/1',
      to: '/user/alex',
      statusCode: 301 // 永久重定向
    }
  ]
}

方法2：自定义服务端中间件 #

不想装模块的话，自己写个Express风格的中间件也可以：

1. 在项目根目录创建server/middleware/redirect.js文件
2. 写入代码：

export default function (req, res, next) {
  if (req.url === '/user/1') {
    res.writeHead(301, { Location: '/user/alex' })
    res.end()
  } else {
    next()
  }
}

3. 在nuxt.config.js里注册中间件：

export default {
  serverMiddleware: [
    '~/server/middleware/redirect.js'
  ]
}

额外小贴士 #

• 要让/user/alex能正常渲染页面，记得在pages目录下创建pages/user/[username].vue，然后通过$route.params.username获取用户名，再加载对应的用户数据。
• 301永久重定向适合告诉搜索引擎路径已永久迁移，利于SEO；302临时重定向适合测试或临时跳转场景。

内容的提问来源于stack exchange，提问作者Alex pouivet