laravel - Vue 路由器历史模式结合 laravel catch all 重定向 404 标头提供 200 标头状态码

Question

我在 Laravel 后端有一个 Vue 项目，对它来说 SEO 很重要。使用我当前的设置，我将所有传入请求重定向到我的 Vue 应用程序。在我的 Vue 应用程序中，我使用 Vue Router 处理路由。

在我的设置中，无法识别的页面被定向到我喜欢的组件（404 组件），但浏览器会收到 200 状态代码。我对此的问题：

如何为浏览器提供正确的 404 状态码？

---

我的代码摘要：

从 Laravel（web.php 文件）中将所有内容重定向到我的 Vue 应用程序：

Route::get( '/{catchall?}', function () {
    return view('app');
})->where('catchall', '.*');

在我的 Vue 路线中，我捕获了所有无法识别的路径以显示我的“404 组件”：

export const NOT_FOUND = {
  path: '/*',
  name: 'not found',
  component: NotFoundComponent,
};

为了完整我的 Vue 应用程序中的路由器设置：

export const router = new VueRouter({
  routes: routes,
  mode: 'history',
  base: '/',
  fallback: true,
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
});

Answer 1

不能 100% 确定，但我敢打赌 Google 在重定向到家之前就知道这是 404。

下载 Screaming Frog（免费网络爬取工具）并爬取所述页面，如果在您的重定向规则发生之前存在 404 状态，您会看到它出现在那里。