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