Nuxt.js 路由答案

【问题标题】：Nuxt.js routingNuxt.js 路由
【发布时间】：2020-09-13 18:20:59
【问题描述】：

我正在从 ASP.NET MVC 迁移到 Nuxt.js，我正在尝试保持相同的 url，以便保持 SEO 评级

我当前的网址是

www.url.com/#computers/#laptops/#dell?page=1

所有 # 都是动态值，因此 URL 也可能是

www.url.com/#phones/#smartphones/#apple?page=1

将所有这些 URL 指向一个页面项目并能够获取每个 # 以及 QueryString 值的值的最简单方法是什么？

提前致谢

【问题讨论】：

标签： vue.js nuxt.js vue-router

【解决方案1】：

您可以在 nuxt 中使用 serverMiddleware 完成此操作

为你的中间件创建一个文件：

middleware/server/seoMiddleware.js

在serverMiddleware 块中将其添加到您的nuxt.config.js：

serverMiddleware: [
  '~/middleware/server/seoMiddleware.js'
]

创建一个文件来处理您的 301 列表：

middleware/server/301.js

在301.js 中使用正则表达式添加路径映射：

export default [
    { from: '/(#[\w\d]+)\/(#[\w\d]+)\/(#[\w\d]+)', to: 'items', capture: true }
]

打开你的seoMiddleware.js

const redirects = require('./301.js').default

export default function (req, res, next) {
  const redirect = redirects.find(redirect => req.url.test(redirect.from))

  if (redirect) {
    const to = redirect.capture ? applyCapturesToUrl(req.url, redirect) : redirect.to

    res.writeHead(301, { Location: to })
    res.end()
  }
  
  // failover
  next()
}

const applyCapturesToUrl(url, redirect) {
  const matches = url.match(redirect.from)

  return `/${redirect.to}/` + matches.map(match => match.replace('#', '')).join('/')
}

我们在这里使用了一些简单的正则表达式来根据您的 URL 结构创建捕获组，并使用 serverMiddleware 来拦截请求并在找到匹配项时返回 301（永久重定向）。我们使用next() 进行故障转移，如果未找到匹配项，则允许请求通过。我们在重定向对象上使用capture 标志，以便我们知道何时处理捕获组，没有它我们可以进行简单的模式匹配。

【讨论】：