router.push有时候在Safari浏览器中无反应

Question

router.push有时候在Safari浏览器中无反应，也就是停留在当前页面，我的代码是这样的，应该没有什么问题吧。

loginInterface
    .logout()
    .then(res => {
      if (res.code === 1000) {
        localStorage.removeItem("user-info");
        Cookies.remove("Authorization");
        Cookies.remove("multiple-tabs");
        router.push("/login").then(() => {
          message("退出登录成功！", { customClass: "el", type: "success" });
        });
      } else {
        message(res.message, { customClass: "el", type: "error" });
      }
    })
    .catch(error => {
      message(error.response.data.message, {
        customClass: "el",
        type: "error"
      });
    });

请求完成之后执行跳转登录页面，但是有时候会失效。我查看了网上的解决办法说可能是因为Safari的缓存机制的问题，有没有办法从代码中彻底解决呢？

Answer 1

引自免费微信小程序：皆我百晓生

在 Safari 浏览器中，由于其特殊的缓存机制，有时可能会导致 router.push 不起作用。为了解决这个问题，您可以尝试在调用 router.push 之前清除浏览器的历史记录，这通常可以强制浏览器刷新并重新加载新的路由。以下是修改后的代码示例：

import { history } from 'vue-router';

// ...其他代码...

loginInterface
    .logout()
    .then(res => {
      if (res.code === 1000) {
        localStorage.removeItem("user-info");
        Cookies.remove("Authorization");
        Cookies.remove("multiple-tabs");

        // 添加以下代码片段来清除浏览器历史记录
        history.replaceState(null, '', '/'); // 清除历史记录
        setTimeout(() => {
          history.pushState(null, '', '/login');
          message("退出登录成功！", { customClass: "el", type: "success" });
        }, 100); // 稍后执行 push，防止同步问题

      } else {
        message(res.message, { customClass: "el", type: "error" });
      }
    })
    .catch(error => {
      message(error.response.data.message, {
        customClass: "el",
        type: "error"
      });
    });

这段代码首先通过 history.replaceState 方法清除了浏览器的历史记录，然后使用 setTimeout 在大约 100 毫秒后执行 history.pushState，这样做的目的是为了避免同步问题，因为 replaceState 和 pushState 都是异步操作。

注意：这种方法可能会导致用户在某些情况下丢失浏览历史，因此在实际应用中需要权衡利弊。另外，如果你使用的是 Vue Router v3 或更高版本，可以直接使用 router.replace 替换 history.replaceState 和 history.pushState，代码会更简洁：

import { router } from 'vue-router'; // 假设你已经正确导入了 router

// ...其他代码...

loginInterface
    .logout()
    .then(res => {
      if (res.code === 1000) {
        localStorage.removeItem("user-info");
        Cookies.remove("Authorization");
        Cookies.remove("multiple-tabs");

        // 使用 router.replace 替换之前的 history.replaceState 和 history.pushState
        router.replace('/').catch(() => router.push('/login'));
        message("退出登录成功！", { customClass: "el", type: "success" });

      } else {
        message(res.message, { customClass: "el", type: "error" });
      }
    })
    .catch(error => {
      message(error.response.data.message, {
        customClass: "el",
        type: "error"
      });
    });

这样就可以尽量避免因 Safari 缓存机制导致的 router.push 失效问题。