router.beforeeach使用async刷新页面404

在 Vue.js 中使用 `router.beforeEach` 来进行页面导航守卫的拦截是常见的做法，但是在使用异步函数（如 `async`）时，可能会导致页面刷新时出现 404 错误的问题。这是因为 `beforeEach` 函数需要返回一个布尔值或一个 Promise 来控制导航行为，而异步函数默认返回一个 Promise 对象。

要解决这个问题，你可以使用 `await` 关键字来等待异步操作的结果，然后根据结果返回布尔值。下面是一个示例代码：

router.beforeEach(async (to, from, next) => {
  const isValid = await checkIfValidRoute(to); // 异步函数检查路由是否有效
  if (isValid) {
    next(); // 继续导航
  } else {
    next('/404'); // 导航到 404 页面
  }
});

async function checkIfValidRoute(to) {
  // 异步函数逻辑，判断路由是否有效
  // 可以使用异步 API 或者发送网络请求等
  // 返回布尔值表示路由是否有效
}

在上面的示例中，`checkIfValidRoute` 函数是一个异步函数，它会返回一个 Promise 对象。我们使用 `await` 关键字来等待该 Promise 结果，并根据结果决定是否继续导航或者导航到 404 页面。

通过这种方式，你可以在 `router.beforeEach` 中使用异步函数，并且在页面刷新时避免出现 404 错误。希望对你有帮助！如果你还有其他问题，请随时提问。