详解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页面刷新时重定向内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue封装Animate.css动画库的使用方式

    vue封装Animate.css动画库的使用方式

    这篇文章主要介绍了vue封装Animate.css动画库的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • 使用keep-alive时,数据无法刷新的问题及解决

    使用keep-alive时,数据无法刷新的问题及解决

    这篇文章主要介绍了使用keep-alive时,数据无法刷新的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • 如何在 ant 的table中实现图片的渲染操作

    如何在 ant 的table中实现图片的渲染操作

    这篇文章主要介绍了如何在 ant 的table中实现图片的渲染操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • Vue.js项目中vue.config.js常用配置项介绍

    Vue.js项目中vue.config.js常用配置项介绍

    在VueCLI项目中,vue.config.js用于自定义构建、开发和部署流程,本文详细解析了其常用配置项,包括基础路径、开发服务器、Webpack配置、CSS预处理、插件选项及环境变量管理等,并,通过代码示例帮助开发者高效管理项目配置,提升开发体验
    2026-05-05
  • Vue登录后添加动态路由并跳转的实践分享

    Vue登录后添加动态路由并跳转的实践分享

    这篇文章讲给大家详细介绍一下Vue如何实现登录后添加动态路由并跳转,文章通过代码示例介绍的非常详细,对我们的学习或工作有一定的的帮助,需要的朋友可以参考下
    2023-07-07
  • element-plus 如何设置 el-date-picker 弹出框位置

    element-plus 如何设置 el-date-picker 弹出框位置

    el-date-picker 组件会自动根据空间范围进行选择比较好的弹出位置,但特定情况下,它自动计算出的弹出位置并不符合我们的实际需求,故需要我们手动设置,这篇文章主要介绍了element-plus 如何设置 el-date-picker 弹出框位置,需要的朋友可以参考下
    2024-07-07
  • Vue.js项目模板搭建图文教程

    Vue.js项目模板搭建图文教程

    下面小编就为大家带来一篇Vue.js项目模板搭建图文教程。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue轻松实现虚拟滚动的示例代码

    vue轻松实现虚拟滚动的示例代码

    移动端网页的日常开发中,偶尔会包含一些渲染长列表的场景,本文主要介绍了vue 虚拟滚动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • vue实现滑块拖拽校验功能的全过程

    vue实现滑块拖拽校验功能的全过程

    vue验证滑块功能,在生活中很多地方都可以见到,使用起来非常方便,这篇文章主要给大家介绍了关于vue实现滑块拖拽校验功能的相关资料,需要的朋友可以参考下
    2021-08-08
  • vue如何通过点击事件实现页面跳转详解

    vue如何通过点击事件实现页面跳转详解

    页面跳转,我们一般都通过路由跳转实现,通常情况下可直接使用router-link标签实现页面跳转,下面这篇文章主要给大家介绍了关于vue如何通过点击事件实现页面跳转的相关资料,需要的朋友可以参考下
    2022-07-07

最新评论