前端官网改版链接旧的url

Question

遇到了一个问题，前端改版官网，之前用的是html文件，改版后使用的是vue nuxt框架，现在想链接到旧官网的url，页面会报404，这种情况如何解决

Answer 1

引自免费微信小程序：皆我百晓生

在Nuxt.js项目中，遇到从旧的HTML静态网站迁移到Vue组件时，旧URL无法正确重定向的问题，可以通过配置Nuxt的nuxt.config.js文件中的router部分来实现。具体步骤如下：

1. 打开项目的nuxt.config.js文件。

2. 在这个文件中找到router对象，如果没有这个对象，可以手动添加。它通常位于其他配置项（比如head、build等）附近。如果找不到，可以添加一个空的router对象：router: {},

3. 在router对象中添加一个新的属性叫middleware，用来定义中间件函数，用于处理重定向。如果你已经有一个名为middleware的对象，那么就在其中添加新的中间件。

以下是添加中间件的示例代码：

export default {
  // ...其他现有配置
  router: {
    middleware: ['custom-redirect-middleware']
  }
}

1. 接下来，创建一个中间件文件，通常放在middleware目录下，例如创建一个叫做customRedirectMiddleware.js的文件。在这个文件中，编写一个函数来处理旧URL的重定向。

中间件文件内容如下：

// middleware/customRedirectMiddleware.js
export default function({ req, redirect }) {
  const oldPath = req.url;
  
  // 根据实际的旧URL路径进行匹配并替换为新路径
  if (oldPath === '/pages/AboutUs.html') {
    return redirect('/about'); // 假设新的路由是'/about'
  }

  // 如果没有匹配到旧路径，则返回false，让Nuxt继续处理请求
  return false;
}

1. 最后，在nuxt.config.js中引用刚刚创建的中间件：

export default {
  // ...其他现有配置
  router: {
    middleware: ['custom-redirect-middleware']
  }
}

这样，当用户访问旧的URL时，Nuxt将会调用这个中间件，并根据规则将他们重定向到新的URL上。注意，你需要为每个旧的URL创建相应的重定向规则。这里仅给出了一个示例，你可以根据实际情况增加更多的重定向规则。