vue實現登陸後跳轉到以前的頁面

在開發中咱們常常遇到這樣的需求,須要用戶直接點擊一個連接進入到一個頁面,用戶點擊後連接後會觸發401攔截返回登陸界面,登陸後又跳轉到連接的頁面而不是首頁,這種問題該如何去作呢?url

先說一下咱們須要用到的幾個API:spa

1.router.currentRoute:當前的路由信息對象,咱們能夠經過router.currentRoute.fullPath得到解析後的 URL,包含查詢參數和 hash 的完整路徑,若是要訪問的頁面的路由有命名(name)的話,能夠經過router.currentRoute.name得到當前路由的名稱。code

2.router.replace:做用和router.push相同,不過它不會向history添加新紀錄,而是替換當前的history記錄。router

 

因爲你們的代碼寫的都不同,我就不放我具體的實現代碼,簡單介紹一下思路:對象

1.用戶點開連接後,跳轉到的目標的路由頁面,而後觸發401攔截器,返回登陸頁面:blog

//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)});
相關文章
相關標籤/搜索