vue實(shí)現(xiàn)登錄后頁(yè)面跳轉(zhuǎn)到之前頁(yè)面
在開(kāi)發(fā)中我們經(jīng)常遇到這樣的需求，需要用戶直接點(diǎn)擊一個(gè)鏈接進(jìn)入到一個(gè)頁(yè)面，用戶點(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，包含查詢參數(shù)和 hash 的完整路徑，如果要訪問(wèn)的頁(yè)面的路由有命名（name）的話，可以通過(guò)router.currentRoute.name獲得當(dāng)前路由的名稱。
2.router.replace：作用和router.push相同，不過(guò)它不會(huì)向history添加新紀(jì)錄，而是替換當(dāng)前的history記錄。
由于大家的代碼寫的都不一樣，我就不放我具體的實(shí)現(xiàn)代碼，簡(jiǎn)單介紹一下思路：
1.用戶點(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前端左側(cè)菜單右側(cè)內(nèi)容的網(wǎng)站界面制作過(guò)程
這篇文章主要介紹了使用Vue和ElementUI制作一個(gè)帶有左側(cè)菜單和右側(cè)內(nèi)容區(qū)的網(wǎng)站頁(yè)面的過(guò)程,文中通過(guò)CSS樣式和深度作用符,實(shí)現(xiàn)了頁(yè)面的美化和功能的完善,需要的朋友可以參考下2025-02-02
vue前端如何接收后端傳過(guò)來(lái)的帶list集合的數(shù)據(jù)
這篇文章主要介紹了vue前端如何接收后端傳過(guò)來(lái)的帶list集合的數(shù)據(jù),前后端交互,文中的示例Json報(bào)文,前端采用vue進(jìn)行接收,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-02-02
vite分目錄打包及去掉默認(rèn)的.gz?文件的操作方法
Vite在默認(rèn)配置下會(huì)將資源打包至assets文件夾并添加哈希值,不同于Webpack的多文件夾存放方式,Vite只對(duì)public文件夾不進(jìn)行打包處理,而Webpack不打包public和static文件夾,本文介紹vite分目錄打包及去掉默認(rèn)的.gz?文件的操作方法,感興趣的朋友一起看看吧2024-09-09
總結(jié)Vue Element UI使用中遇到的問(wèn)題
這篇文章主要介紹了Vue Element UI使用中遇到的問(wèn)題，對(duì)ElementUI感興趣的同學(xué)，可以參考下2021-05-05
vue中provide和inject的用法及說(shuō)明(vue組件爺孫傳值)
這篇文章主要介紹了vue中provide和inject的用法及說(shuō)明(vue組件爺孫傳值)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue+elementui實(shí)現(xiàn)下拉表格多選和搜索功能
這篇文章主要為大家詳細(xì)介紹了vue+elementui實(shí)現(xiàn)下拉表格多選和搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
vue3實(shí)現(xiàn)頁(yè)面截圖功能示例詳解
在Vue3項(xiàng)目中實(shí)現(xiàn)頁(yè)面截圖的功能,可以通過(guò)使用js-web-screen-shot組件來(lái)實(shí)現(xiàn),本文以toolbox.js作為案例,詳細(xì)介紹了如何在Vue3框架下,利用js-web-screen-shot組件實(shí)現(xiàn)頁(yè)面截圖的具體步驟和方法,這一技術(shù)的應(yīng)用,不僅可以提高用戶體驗(yàn),還能在需要時(shí)方便地獲取頁(yè)面的即時(shí)信息2024-10-10
react+vite動(dòng)態(tài)導(dǎo)入報(bào)錯(cuò)@vite-ignore的問(wèn)題及解決
這篇文章主要介紹了react+vite動(dòng)態(tài)導(dǎo)入報(bào)錯(cuò)@vite-ignore的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
手把手搭建安裝基于windows的Vue.js運(yùn)行環(huán)境
手把手教大家搭建安裝基于windows的Vue.js的運(yùn)行環(huán)境，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細(xì)介紹了Vue彈窗組件的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09