vue實(shí)現(xiàn)登錄后頁(yè)面跳轉(zhuǎn)到之前頁(yè)面
在開(kāi)發(fā)中我們經(jīng)常遇到這樣的需求，需要用戶(hù)直接點(diǎn)擊一個(gè)鏈接進(jìn)入到一個(gè)頁(yè)面，用戶(hù)點(diǎn)擊后鏈接后會(huì)觸發(fā)401攔截返回登錄界面，登錄后又跳轉(zhuǎn)到鏈接的頁(yè)面而不是首頁(yè)，這種問(wèn)題該如何去做呢？
先說(shuō)一下我們需要用到的幾個(gè)API：
1.router.currentRoute:當(dāng)前的路由信息對(duì)象，我們可以通過(guò)router.currentRoute.fullPath獲得解析后的 URL，包含查詢(xún)參數(shù)和 hash 的完整路徑，如果要訪(fǎng)問(wèn)的頁(yè)面的路由有命名（name）的話(huà)，可以通過(guò)router.currentRoute.name獲得當(dāng)前路由的名稱(chēng)。
2.router.replace：作用和router.push相同，不過(guò)它不會(huì)向history添加新紀(jì)錄，而是替換當(dāng)前的history記錄。
由于大家的代碼寫(xiě)的都不一樣，我就不放我具體的實(shí)現(xiàn)代碼，簡(jiǎn)單介紹一下思路：
1.用戶(hù)點(diǎn)開(kāi)鏈接后，跳轉(zhuǎn)到的目標(biāo)的路由頁(yè)面，然后觸發(fā)401攔截器，返回登錄頁(yè)面：
//401攔截
if（status == "401"）{
router.push("/login")
}
2.我們可以在401攔截的時(shí)候?qū)⒛繕?biāo)鏈接保存在url中：
if (status == 401) {
//判斷當(dāng)前的路由是否是目標(biāo)路由
if(router.currentRoute.name == "target"){
//跳轉(zhuǎn)回login路由，并把目標(biāo)路由的url路徑保存在login的query中
router.replace({
name:"login",
query: {redirect: router.currentRoute.fullPath}
})
}else{
/* 普通401攔截直接返回到登錄頁(yè)面 */
router.push('/login');
}
}
3.點(diǎn)擊登錄后使用url上保存的query直接跳轉(zhuǎn)回目標(biāo)頁(yè)面
router.push({path:decodeURIComponent(url)});
以上就是我們分享的功能實(shí)現(xiàn)代碼，感謝你對(duì)腳本之家的支持。
相關(guān)文章
Vue數(shù)據(jù)更新頁(yè)面卻沒(méi)有更新的幾種情況以及解決方法
我們?cè)陂_(kāi)發(fā)過(guò)程中會(huì)碰到數(shù)據(jù)更新,但是頁(yè)面卻沒(méi)有更新的情況,下面這篇文章主要給大家介紹了關(guān)于Vue數(shù)據(jù)更新頁(yè)面卻沒(méi)有更新的幾種情況以及解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
Vue實(shí)現(xiàn)萬(wàn)年日歷的示例詳解
又是一個(gè)老生常談的功能，接下來(lái)會(huì)從零實(shí)現(xiàn)一個(gè)萬(wàn)年日歷，從布局到邏輯，再到隨處可見(jiàn)的打卡功能。文中的示例代碼簡(jiǎn)潔易懂，需要的可以參考一下2023-01-01
Element UI 上傳組件實(shí)現(xiàn)文件上傳并附帶額外參數(shù)功能
在使用 ElementUI 的上傳組件 el-upload 實(shí)現(xiàn)文件上傳功能時(shí),如果單文件上傳是比較簡(jiǎn)單的,但是在實(shí)際需求中,往往會(huì)在上傳文件時(shí)伴隨著一些其他參數(shù),怎么操作呢,下面通過(guò)示例代碼講解感興趣的朋友一起看看吧2023-08-08
這篇文章主要介紹了Vue組件上使用v-model之單選框,代碼分為子組件內(nèi)容和父組件內(nèi)容，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10
vue+Element-ui前端實(shí)現(xiàn)分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了vue+Element-ui前端實(shí)現(xiàn)分頁(yè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
vue實(shí)現(xiàn)圖書(shū)管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖書(shū)管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要給大家介紹了關(guān)于在Vue中使用Echarts可視化庫(kù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登陸功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue函數(shù)式組件的應(yīng)用實(shí)例詳解
這篇文章主要介紹了Vue函數(shù)式組件的應(yīng)用實(shí)例詳解，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
vue實(shí)現(xiàn)在進(jìn)行增刪改操作后刷新頁(yè)面
這篇文章主要介紹了vue實(shí)現(xiàn)在進(jìn)行增刪改操作后刷新頁(yè)面，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08