Nuxt.js 路由

Question

我正在從 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 值的最簡單方法是什么？

提前致謝

Answer 1

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

為你的中間件創建一個文件：

middleware/server/seoMiddleware.js

即添加到您的nuxt.config.js在serverMiddleware塊：

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標志，因此我們知道何時處理捕獲組，沒有它我們只能進行簡單的模式匹配。