详解Vue如何在页面刷新时进行重定向

 更新时间:2025年01月02日 10:13:10   作者:Koranto  
这篇文章主要为大家详细介绍了Vue如何在页面刷新时进行重定向,文中的示例代码简洁易懂,具有一定的借鉴价值,有需要的小伙伴可以参考一下

尝试

今天处理一个页面重定向问题的时候,碰到了一个卡点,那就是如何在页面卸载时进行页面导航重定向,当时试了三个方法,都失败了

1是通过onUnmounted,在组件卸载时做重定向

onUnmounted(() => {
    window.location.replace(redirectUrl.value);
});

2是通过onBeforeRouteLeave,在路由切换刷新时做重定向

onBeforeRouteLeave(async (to, from, next) => {
    next(redirectUrl.value);
});

3是通过window监听beforeunload事件,在页面卸载时做重定向

useEventListener(window, 'beforeunload', () => {
    window.location.replace(redirectUrl.value);
});

但是这三个方法都失败了,于是我思考着在页面卸载时做重定向刷新是否存在可行性

通过查找资料,我知道了第三点失败的原因:

参考文章:使用JavaScript监视有没有被刷新后跳转其他页面

经过一番摸索,我找到了两个较为可靠的解决方案

1是通过vue-router,在从上一个页面导航到当前页面时,在路径最后加一个参数,等到进入了另一个页面,在其onBeforeMount钩子中通过$router.replace将该参数修改,之后在当前页面刷新时,去取这个参数,如果不是最开始传过来的参数,则在onBeforeMount钩子中将其重定向回上一个页面

2是通过Session Storage或Local Storage来实现,可以在刷新前将信息存储在本地存储中,然后在页面加载时检查是否存在该信息,如果存在,则进行页面跳转。

vue-router方案

以下为前置页面(即上一页面)中的代码示例,由于触发了某种权限问题,需要重定向到某个默认页面,这边是以接口为例,当接口请求时,返回参数提示无权限,则重定向到无权限页面

async function aiCandidateOutReport() {
    try {
        ...
        if(loading.value) return;
        loading.value = true;
        const { code, data } = await xxxApi({ token: token.value });
        if (code !== 0) {
                $router.push(`/no-permission?redirectUrl=${encodeURIComponent(window.location.href)}&noRedirect=1`);
            return;
        }
        ...
    } catch (error) {
        console.log(error);
    } finally {
        loading.value = false;
    }
}
aiCandidateOutReport()

当接口无权限(这里用code不等于0类比),则向history栈中推一条路由,之后页面跳转至no-permission对应下的无权限页面

因为在页面卸载时做重定向行不通,那就换个思路,在页面加载时进行重定向判断====》》

在无权限页面中,可以通过onBeforeMount钩子在页面加载时判断是否重定向

// redirectUrl解码
const redirectUrl = computed(() => decodeURIComponent($route.query.redirectUrl as string));


onBeforeMount(() => {
    const noRedirect = $route.query.noRedirect;
    if (noRedirect === '0') {
        window.location.replace(redirectUrl.value);
    }
    $router.replace({ query: { ...$route.query, noRedirect: 0 } });
});

关键点在于由前置页面向无权限页面跳转时传递的路由参数redirectUrl=${encodeURIComponent(window.location.href)} 和 noRedirect=1

到达无权限页面后从$route中将两个参数提取出来,并且在初次加载时就将 noRedirect 由1替换为0,此后每次刷新,都会在onBeforeMount钩子中进入if (noRedirect === '0')的条件判断中,重定向回前置页面,进入前置页面后走前置页面的逻辑,如果还是无权限,则继续跳转无权限页面,再在刷新时重定向回去,直到前置页面有权限后停留在前置页面

Storage方案

这个方案比上一个方案更加简单一点,只需要在beforeunload事件中将自己锚定的标识参数setItem至sessionStorage中,在load事件中去检查是否有该属性,如果改属性存在,则将其清空后重定向回自己想要的页面

示例代码如下

// 添加事件监听器
window.addEventListener('beforeunload', function (event) {
  console.log("在这里执行您想要的操作,例如存储信息到本地存储")
  sessionStorage.setItem('refreshed', 'true');
});


// 在页面加载时检查本地存储中的信息
window.addEventListener('load', function () {
  const refreshed = sessionStorage.getItem('refreshed');


  console.log(" 如果本地存储中的信息存在,则进行页面跳转")
  if (refreshed === 'true') {
    // 清除本地存储中的信息,以防止再次触发跳转
    sessionStorage.removeItem('refreshed');


    // 执行页面跳转到另一个页面
    window.location.href = 'https://xxx/123/index.html';
  }
});

两个方案各有好处,vue-router方案可以重定向回自己想要的,带着特定参数的页面中;Storage方案中,你可以重定向到任何你想要去的无需带路由参数的页面中(因为既然你已经有路由参数和完整路由了,实际上并不需要这个页面)

方案一是与业务强相关一些的,是我最近在做需求时解决的一个问题,当然,方案二也可以通过方案一类似的改写,达到跟方案一一样的效果

到此这篇关于详解Vue如何在页面刷新时进行重定向的文章就介绍到这了,更多相关Vue页面刷新时重定向内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 使用el-form-item设置标签长度

    使用el-form-item设置标签长度

    这篇文章主要介绍了使用el-form-item设置标签长度方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue中配置scss全局变量的步骤

    vue中配置scss全局变量的步骤

    这篇文章主要介绍了vue中配置scss全局变量的步骤,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-12-12
  • vue-cli 介绍与安装

    vue-cli 介绍与安装

    这篇文章主要给大家介绍的是vue-cli 介绍与安装,vue-cli是和vue进行深度组合的工具,可以快速帮我们创建vue项目,并且把一些脚手架相关的代码给我们创建好。真正使用vue开发项目,都是用vue-cli来创建项目的,下面文章详细内容,需要的朋友可以参考一下
    2021-10-10
  • Vue 使用postMessage 实现父子跨域通信

    Vue 使用postMessage 实现父子跨域通信

    这篇文章主要介绍了Vue应用 postMessage 实现父子跨域通信,通过示例介绍了postMessage的使用,本文结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • 解决VUE中document.body.scrollTop为0的问题

    解决VUE中document.body.scrollTop为0的问题

    今天小编就为大家分享一篇解决VUE中document.body.scrollTop为0的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 在 Vue 中使用 JSX 及使用它的原因浅析

    在 Vue 中使用 JSX 及使用它的原因浅析

    这篇文章主要介绍了在 Vue 中使用 JSX 及使用它的原因浅析,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • 浅谈vue项目可以从哪些方面进行优化

    浅谈vue项目可以从哪些方面进行优化

    本篇文章主要介绍了浅谈vue项目可以从哪些方面进行优化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • vuex中getters的基本用法解读

    vuex中getters的基本用法解读

    这篇文章主要介绍了vuex中getters的基本用法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue响应式原理与虚拟DOM实现步骤详细讲解

    Vue响应式原理与虚拟DOM实现步骤详细讲解

    在Vue中最重要、最核心的概念之一就是响应式系统。这个系统使得Vue能够自动追踪数据变化,并在数据发生变化时自动更新相关的DOM元素。本文将会探讨Vue响应式系统的实现原理及其底层实现
    2023-03-03
  • Vue项目中首页长时间白屏的原因以及解决过程

    Vue项目中首页长时间白屏的原因以及解决过程

    这篇文章主要介绍了Vue项目中首页长时间白屏的原因以及解决过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01

最新评论