Question

我正在寻找一种重定向所有URL的方法，以使它们的结尾都没有斜杠。我尝试使用https://www.npmjs.com/package/@nuxtjs/redirect-module，但无法正确重定向。

redirect: [
    {
      from: '\/$',
      to: (from, req) => req.url.replace(/\/$/, '')
    }
  ],

例如，要更改这样的网址http://localhost:8080/item/test-slug/ 该模块将我重定向到http://localhost:8080/item/test-slug/item/test-slug

任何见识都将受到欢迎。谢谢！

Answer 1

我已经使用自定义中间件解决了这个问题。它将重定向到最后没有斜杠的url。

创建 src/middleware/trailingSlashRedirect.js

export default function ({ route, redirect }) {
  if (route.path !== '/' && route.path.endsWith('/')) {
    const { path, query, hash } = route;
    const nextPath = path.replace(/\/+$/, '') || '/';
    const nextRoute = { path: nextPath, query, hash };

    redirect(nextRoute);
  }
}

在 nuxt.config.js 中注册：

export default {
  ...
  router: {
    middleware: 'trailingSlashRedirect',
  },
}

因此，您不应使用任何模块来解决此问题。我认为这比使用第三方库要好得多。

Answer 2

您可以通过以下方式使用Nuxt最新版本（自v2.10起可用）删除结尾的斜杠： https://nuxtjs.org/api/configuration-router/#trailingslash

trailingSlash : Type: Boolean or undefined
Default: undefined
Available since: v2.10
ex:
router: {
  trailingSlash: false
}

或者与旧版本的Nuxt一起使用，可以使用nuxt-trailingslash-module https://www.npmjs.com/package/nuxt-trailingslash-module

npm i nuxt-trailingslash-module

Answer 3

所以到目前为止，我发现的唯一解决方案并不完美。

使用redirect-module，我在重定向列表的顶部添加了以下内容：

{
  // eslint-disable-next-line
  from: '(?!^\/$|^\/[?].*$)(.*\/[?](.*)$|.*\/$)',
  to: (from, req) => {
    const base = req._parsedUrl.pathname.replace(/\/$/, '');
    const search = req._parsedUrl.search;
    return base + (search != null ? search : '');
  }
},

也在 nuxt.config.js 中，我确保添加了尾部斜杠配置。（See the doc）

router: {
  trailingSlash: false
},

注意： 它使用查询参数重定向所有以'/'结尾的URL，但与首页'/' （似乎已通过某种方式处理）不匹配

以下内容将重定向以下内容：

'/blog/'至'/blog'
'/blog/?a=b'至'/blog?a=b'
'/blog/foo/'至'/blog/foo'
'/blog/foo/?a=b'至'/blog/foo?a=b'
'/'至'/'。 -> 不起作用
'/?a=b'至'/?a=b'。 -> 不起作用

我做了一个测试列表available here

正则表达式的解释

由于我不是Regex专家，但它可能并不完美

'(?!^\/$|^\/[?].*$)(.*\/[?](.*)$|.*\/$)'

它被分成两部分：1个排除项和1个包含项。

排除项：(?!^\/$|^\/[?].*$)，包含一项检查以排除独立的尾部逗号（/）或具有查询字符串/?foo=bar路由的独立的尾部逗号。主要用于主页。

包含的内容：(.*\/[?](.*)$|.*\/$)包含检查试用逗号（/blog/）或带查询字符串的结尾逗号（/blog/?foo=bar）

如何从nuxt.js中的网址中删除斜杠？

3 个答案: