axios Vue -点击浏览器中的后退按钮时刷新状态

lmyy7pcs  于 2023-08-04  发布在  iOS
关注(0)|答案(1)|浏览(121)

我正在开发一个登录页面,其中列出了不同的供应商选项。如果您单击某个提供商,它将重定向到相应提供商的登录页面。这个登录组件有一个bool变量“pageRedirect”。如果pageRedirect为true,则组件显示“Redirecting...”,否则显示提供程序列表。

<template>
    <div v-if="pageRedirect">
      <h1>Redirecting...</h1>
    </div>
    <div v-else>
     <!-- list of providers -->
    </div>
</template>

字符串
如果单击提供程序,pageRedirect值将设置为true,并且有一个转到后端的axios调用。重定向在go后端使用http.Redirect()进行。同时,设置pageRedirect的方法完成。因此,当我从重定向页面点击浏览器中的后退按钮时,它会返回到登录页面,该页面显示“重定向...”,并且不显示提供商列表。这是因为pageRedirect值仍然为true。

axios
   .post("/redirectUrl", body, nil)
     .then(function (response)
      {
              this.pageRedirect = true;
              window.location.href = response.headers.location;
              // if I add this.pageRedirect=false here, it shows "Redirecting...", but doesnt
              // doesnt redirect itself
      }).
     .catch(function (response) {
            //display error
     });


如果我尝试在相同的方法中将pageRedirect设置为false,它不会重定向自己,它仍然在同一页面上。因此,我需要一些解决方案,如vue-watchers或其他东西,将此pageRedirect值设置为false,以便从重定向页面中点击浏览器中的返回按钮。
先谢了

yzuktlbb

yzuktlbb1#

我使用document visibilityState修复了它。

document.addEventListener("visibilitychange", () => {
       this.pageRedirect=false;
});

字符串
感谢@yoduh和@Jose Fernández的宝贵意见

相关问题