Nuxt - 每次路由切换后 asyncData / fetch 跨域报错（但是刷新后会好）

前言

Nuxt 官方文档：asyncData is called every time before loading the page component and is only available for such. It will be called server-side once (on the first request to the Nuxt app) and client-side when navigating to further routes.

啥意思呢，asyncData 并不是每次都从服务端渲染，只有当页面刷新时才从服务端渲染，而在客户端点击链接跳转时并不从服务端渲染，而是和标准 Vue SAP（单页面） 应用一样，从客户端进行渲染。

解决方案

既然路由跳转不从服务端渲染，那我们就直接原生跳转。

// 原: this.$router.push
window.location.href = 'xxx'

或者，将用户跳转的 nuxt-link 标签改成 a 标签的方式进行跳转。

通过 nuxt-link 进行跳转不会跳转到新的页面，也不会重新渲染，它会选择路由所指的组件进行渲染，避免了重复渲染的“无用功”。 通过 a 标签进行跳转，页面会被重新渲染，即相当于重新打开一个新的网页，体现为视觉上的 “闪烁”。