Nuxt 3 - 如何删除尾部斜杠？

Question

在 Nuxt 3 中，如何从 url 中删除尾部斜杠？

在 Nuxt 2 中，这是通过将这些行添加到

nuxt.config.js

来完成的：

router: {
    trailingSlash: false
  }

Nuxt 3 中的等效项是什么？

Answer 1

基于@evg_ny的回答，我创建了这个版本，它将与Nuxt3一起使用，将带有尾随斜杠的路由重定向到非尾随斜杠变体：

export default defineNuxtRouteMiddleware((to, from) => {
  if (to.path !== '/' && to.path.endsWith('/')) {
    const { path, query, hash } = to;
    const nextPath = path.replace(/\/+$/, '') || '/';
    const nextRoute = { path: nextPath, query, hash };
    return navigateTo(nextRoute, { redirectCode: 301 });
  }
})

将其保存在

./middleware/redirect-trailing-slash.global.js

中，它将在全球范围内工作

Answer 2

根据nuxt文档和vue路由器文档。似乎

trailingSlash

已被

strict

取代，它控制“是否不允许尾随斜杠。”。

但是，根据文档，默认值是

false

，这意味着无需任何配置，您应该能够访问带或不带尾部斜杠的页面。

Answer 3

如果您的目标是删除所有尾部斜杠并重定向到没有尾部斜杠的页面，那么您可以使用如下中间件：

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 };

    return navigateTo(nextRoute, { redirectCode: 301 });
  }
}

Answer 4

对于使用 SSR 的 Nuxt 3，目录 确实存在 并且 Apache 应该 提供该目录的物理

index.html

文件。这与客户端渲染不同，客户端渲染通过为所有内容提供 root

index.html

来工作。

解决方案是 1) 关闭目录尾部斜杠，然后 2) 重写请求以请求该目录的

index.html

文件。

我的 .htaccess 之前和之后：

# BEFORE
#RewriteEngine On
#RewriteBase /
#RewriteRule ^index\.html$ - [L]
#RewriteCond %{REQUEST_FILENAME} !-f
#RewriteCond %{REQUEST_FILENAME} !-d
#RewriteRule . /index.html [L] # For non-SSR, serve the root index.html


# AFTER, WITH SSR
DirectorySlash Off # Turn off trailing slash

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
#RewriteCond %{REQUEST_FILENAME} !-d # Omit for SSR because there is a physical directory
RewriteRule ^(.*)$ $1/index.html [L]
#RewriteRule . /index.html [L] # Omit for SSR because the served file is the requested dir's index.html (rather than the root index.html)