详解Vue如何在页面刷新时进行重定向
作者：Koranto
尝试
今天处理一个页面重定向问题的时候，碰到了一个卡点，那就是如何在页面卸载时进行页面导航重定向，当时试了三个方法，都失败了
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页面刷新时重定向内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！