详解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基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析

    vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析

    这篇文章主要介绍了vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件,结合实例形式分析了vue.js事件简写、冒泡及阻止冒泡等相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • Vue实现Base64编码与解码的代码示例

    Vue实现Base64编码与解码的代码示例

    在Web开发中,Base64编码常用于将二进制数据转换为文本字符串,以便在网络上传输,在Vue.js应用中,Base64编码广泛应用于图像的嵌入,本文将详细介绍如何在Vue.js中实现Base64编码与解码,并提供多种示例和实现思路,需要的朋友可以参考下
    2024-09-09
  • vue+element项目实时监听div宽度的变化

    vue+element项目实时监听div宽度的变化

    这篇文章主要介绍了vue+element项目里实时监听某个div宽度的变化,然后执行相应的事件,本文结合示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2024-08-08
  • Vue动态组件与异步组件实例详解

    Vue动态组件与异步组件实例详解

    这篇文章主要介绍了Vue动态组件与异步组件,结合实例形式分析了动态组件与异步组件相关概念、功能及使用技巧,需要的朋友可以参考下
    2019-02-02
  • vue项目实战之优雅使用axios

    vue项目实战之优雅使用axios

    axios是一个基于promise的HTTP库,可以用在浏览器和 node.js 中,下面这篇文章主要给大家介绍了关于vue项目实战之优雅使用axios的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-02-02
  • vue中v-mode详解及使用示例详解

    vue中v-mode详解及使用示例详解

    这篇文章主要介绍了vue中v-mode详解以及具体的使用示例,在组件中使用 v-model 时,需要定义model选项,指定绑定的prop和事件,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • Vue实现剪切板图片压缩功能

    Vue实现剪切板图片压缩功能

    这篇文章主要介绍了Vue实现剪切板图片压缩功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • Vue集成百度地图实现位置选择功能

    Vue集成百度地图实现位置选择功能

    由于添加门店时,需要选择门店的省、市、区、详细地址、以及门店的经纬度信息,本文给大家分享Vue集成百度地图实现位置选择功能,感兴趣的朋友一起看看吧
    2022-06-06
  • Vue组件间的样式冲突污染问题详解

    Vue组件间的样式冲突污染问题详解

    默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题。导致组件之间样式冲突的根本原因,我们接下来探究一下
    2022-11-11
  • Vue3中简单实现动态添加路由

    Vue3中简单实现动态添加路由

    本文主要介绍了Vue3中简单实现动态添加路由,,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05

最新评论