嘗試

今天處理一個頁面重定向問題的時候，碰到了一個卡點，那就是如何在頁面卸載時進行頁面導航重定向，當時試了三個方法，都失敗了

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

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

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

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

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

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

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

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

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

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

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

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

vue-router方案

以下為前置頁面(即上一頁面)中的代碼示例，由于觸發(fā)了某種權(quán)限問題，需要重定向到某個默認頁面，這邊是以接口為例，當接口請求時，返回參數(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()

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

因為在頁面卸載時做重定向行不通，那就換個思路，在頁面加載時進行重定向判斷====》》

在無權(quán)限頁面中，可以通過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 } });
});

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

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

Storage方案

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

示例代碼如下

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


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


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


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

兩個方案各有好處，vue-router方案可以重定向回自己想要的，帶著特定參數(shù)的頁面中；Storage方案中，你可以重定向到任何你想要去的無需帶路由參數(shù)的頁面中（因為既然你已經(jīng)有路由參數(shù)和完整路由了，實際上并不需要這個頁面）

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

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

最新評論