Nuxt中Redirect跳转的误区：$axios.onError无法终止原页面加载

在Nuxt.js中，使用redirect实现页面跳转时，可能遇到一个意想不到的问题：$axios.onError无法终止原页面的加载，导致错误页面替换跳转页面。

Nuxt中Redirect跳转的工作原理

Nuxt中的redirect函数用于在服务器端或客户端重定向到另一个页面。在服务器端，它会向客户端发送一个带有状态码301或302的响应，指示浏览器重定向到新的URL。在客户端，它会使用window.location.href直接重定向。

$axios.onError的作用

$axios.onError是一个axios提供的钩子，当发生错误请求时触发。它允许你对错误响应采取特定的操作，例如显示错误消息或重定向到错误页面。

问题所在

在Nuxt中，当使用redirect函数重定向到另一个页面时，$axios.onError将无法终止原页面的加载。这是因为redirect函数是在服务器端执行的，而$axios.onError是在客户端执行的。

当$axios.onError检测到错误响应时，它会触发重定向到错误页面。然而，此时原页面的asyncData方法仍在执行中，并且将继续执行完。因此，错误页面将替换跳转页面，而不是原页面。

解决方案

解决此问题的最佳方法是在redirect函数之前手动终止原页面的加载。可以通过调用window.stop()或this.$nuxt.err(statusCode)来实现。

this.$axios.get('/api/data').catch(error => {
  // 终止原页面的加载
  window.stop();
  // 重定向到错误页面
  this.$nuxt.err(error.response.status);
});

替代方案

如果你不希望手动终止原页面的加载，还可以使用以下替代方案：

• 使用Nuxt的asyncData方法： asyncData方法是在服务器端执行的，因此可以在其中使用try...catch块来处理错误，并在错误发生时手动重定向到错误页面。
• 使用自定义中间件： 你可以创建自定义中间件，在请求失败时捕获错误并重定向到错误页面。这将在所有页面上统一处理错误。

结论

在Nuxt.js中，使用redirect函数时，需要注意$axios.onError无法终止原页面的加载。通过手动终止原页面的加载或使用替代方案，可以确保正确处理错误并防止错误页面替换跳转页面。