嘗試

今天處理一個(gè)頁面重定向問題的時(shí)候，碰到了一個(gè)卡點(diǎn)，那就是如何在頁面卸載時(shí)進(jìn)行頁面導(dǎo)航重定向，當(dāng)時(shí)試了三個(gè)方法，都失敗了

1是通過onUnmounted，在組件卸載時(shí)做重定向

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

2是通過onBeforeRouteLeave，在路由切換刷新時(shí)做重定向

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

3是通過window監(jiān)聽beforeunload事件，在頁面卸載時(shí)做重定向

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

但是這三個(gè)方法都失敗了，于是我思考著在頁面卸載時(shí)做重定向刷新是否存在可行性

通過查找資料，我知道了第三點(diǎn)失敗的原因：

參考文章：使用JavaScript監(jiān)視有沒有被刷新后跳轉(zhuǎn)其他頁面

經(jīng)過一番摸索，我找到了兩個(gè)較為可靠的解決方案

1是通過vue-router，在從上一個(gè)頁面導(dǎo)航到當(dāng)前頁面時(shí)，在路徑最后加一個(gè)參數(shù)，等到進(jìn)入了另一個(gè)頁面，在其onBeforeMount鉤子中通過$router.replace將該參數(shù)修改，之后在當(dāng)前頁面刷新時(shí)，去取這個(gè)參數(shù)，如果不是最開始傳過來的參數(shù)，則在onBeforeMount鉤子中將其重定向回上一個(gè)頁面

2是通過Session Storage或Local Storage來實(shí)現(xiàn)，可以在刷新前將信息存儲(chǔ)在本地存儲(chǔ)中，然后在頁面加載時(shí)檢查是否存在該信息，如果存在，則進(jìn)行頁面跳轉(zhuǎn)。

vue-router方案

以下為前置頁面(即上一頁面)中的代碼示例，由于觸發(fā)了某種權(quán)限問題，需要重定向到某個(gè)默認(rèn)頁面，這邊是以接口為例，當(dāng)接口請(qǐng)求時(shí)，返回參數(shù)提示無權(quán)限，則重定向到無權(quán)限頁面

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()

當(dāng)接口無權(quán)限(這里用code不等于0類比)，則向history棧中推一條路由，之后頁面跳轉(zhuǎn)至no-permission對(duì)應(yīng)下的無權(quán)限頁面

因?yàn)樵陧撁嫘遁d時(shí)做重定向行不通，那就換個(gè)思路，在頁面加載時(shí)進(jìn)行重定向判斷====》》

在無權(quán)限頁面中，可以通過onBeforeMount鉤子在頁面加載時(shí)判斷是否重定向

// 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 } });
});

關(guān)鍵點(diǎn)在于由前置頁面向無權(quán)限頁面跳轉(zhuǎn)時(shí)傳遞的路由參數(shù)redirectUrl=${encodeURIComponent(window.location.href)} 和 noRedirect=1

到達(dá)無權(quán)限頁面后從$route中將兩個(gè)參數(shù)提取出來，并且在初次加載時(shí)就將 noRedirect 由1替換為0，此后每次刷新，都會(huì)在onBeforeMount鉤子中進(jìn)入if (noRedirect === '0')的條件判斷中，重定向回前置頁面，進(jìn)入前置頁面后走前置頁面的邏輯，如果還是無權(quán)限，則繼續(xù)跳轉(zhuǎn)無權(quán)限頁面，再在刷新時(shí)重定向回去，直到前置頁面有權(quán)限后停留在前置頁面

Storage方案

這個(gè)方案比上一個(gè)方案更加簡(jiǎn)單一點(diǎn)，只需要在beforeunload事件中將自己錨定的標(biāo)識(shí)參數(shù)setItem至sessionStorage中，在load事件中去檢查是否有該屬性，如果改屬性存在，則將其清空后重定向回自己想要的頁面

示例代碼如下

// 添加事件監(jiān)聽器
window.addEventListener('beforeunload', function (event) {
  console.log("在這里執(zhí)行您想要的操作，例如存儲(chǔ)信息到本地存儲(chǔ)")
  sessionStorage.setItem('refreshed', 'true');
});


// 在頁面加載時(shí)檢查本地存儲(chǔ)中的信息
window.addEventListener('load', function () {
  const refreshed = sessionStorage.getItem('refreshed');


  console.log(" 如果本地存儲(chǔ)中的信息存在，則進(jìn)行頁面跳轉(zhuǎn)")
  if (refreshed === 'true') {
    // 清除本地存儲(chǔ)中的信息，以防止再次觸發(fā)跳轉(zhuǎn)
    sessionStorage.removeItem('refreshed');


    // 執(zhí)行頁面跳轉(zhuǎn)到另一個(gè)頁面
    window.location.href = 'https://xxx/123/index.html';
  }
});

兩個(gè)方案各有好處，vue-router方案可以重定向回自己想要的，帶著特定參數(shù)的頁面中；Storage方案中，你可以重定向到任何你想要去的無需帶路由參數(shù)的頁面中（因?yàn)榧热荒阋呀?jīng)有路由參數(shù)和完整路由了，實(shí)際上并不需要這個(gè)頁面）

方案一是與業(yè)務(wù)強(qiáng)相關(guān)一些的，是我最近在做需求時(shí)解決的一個(gè)問題，當(dāng)然，方案二也可以通過方案一類似的改寫，達(dá)到跟方案一一樣的效果

到此這篇關(guān)于詳解Vue如何在頁面刷新時(shí)進(jìn)行重定向的文章就介紹到這了,更多相關(guān)Vue頁面刷新時(shí)重定向內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！