首頁 > web前端 > js教程 > vue實作登入後頁面跳到之前頁面實例分享

vue實作登入後頁面跳到之前頁面實例分享

小云云
發布: 2018-01-09 09:49:13
原創
3967 人瀏覽過

在開發中我們經常遇到這樣的需求,需要使用者直接點擊一個連結進入到一個頁面,使用者點擊後連結後會觸發401攔截返回登入介面,登入後又跳到連結的頁面而不是首頁,這種問題該如何去做呢?本文主要跟大家分享了vue實現登入後頁面跳到之前頁面的一個功能,有這方便需要的朋友學習參考下吧。希望能幫助大家。

先說一下我們需要用到的幾個API:

1.router.currentRoute:目前的路由資訊對象,我們可以透過router.currentRoute.fullPath獲得解析後的URL,包含查詢參數和hash 的完整路徑,如果要存取的頁面的路由有命名(name)的話,可以透過router.currentRoute.name取得目前路由的名稱。

2.router.replace:作用和router.push相同,不過它不會為history增加新紀錄,而是替換目前的history記錄。

由於大家的程式碼寫的都不一樣,我就不放我具體的實作程式碼,簡單介紹一下想法:

1.用戶點開連結後,跳到的目標的路由頁面,然後觸發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)});
登入後複製

相關推薦:

微信小程點選文字實作頁面跳轉功能的方法

#關於html頁面跳轉傳遞參數問題解答

HTML頁面跳轉及參數傳遞問題

以上是vue實作登入後頁面跳到之前頁面實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板