溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了Vue如何實現登錄后繼續跳轉指定頁面，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
在開發中我們經常遇到這樣的需求，需要用戶登錄后才可以訪問該頁面，如果用戶沒有登錄點擊該頁面時則自動跳轉到登錄頁面，登錄后又跳轉到鏈接的頁面而不是首頁，這種問題該如何去做呢？
1、在路由器router下的 index.js 的配置中，給需要攔截登錄的頁面的路由上加一個meta: {loginRequest: true} ,其中loginRequest 變量自己可以隨意定義
2、在main.js文件里面添加beforeEach鉤子函數
解釋：
router.beforeEach((to, from, next) => { } 三個參數：
to：即將要進入的目標 路由對象
from：當前導航正要離開的路由
next：(function函數) 調用next() 進行管道中的下一個鉤子
next() 無參 進行 下一個鉤子函數
next({ path:'/xxx' , query:{}}) 攜帶參數跳到xxx頁面
3、登錄頁面login.vue，登錄完成后，跳到指定頁面或首頁
補充知識：vue實現登錄后跳轉到來源路由url
sessionStorage存儲from.path來源的路由url，如果不是登錄或者注冊就攔截跳到登錄頁，如果是就放行
router.beforeEach(function(to,from,next){
if(to.path!='/login' && to.path!='/register'){
sessionStorage.setItem('referrer',from.path) //儲存來源路由
alert('請登錄')
next({
path:'/login'
})
}else{
next()
}
})登錄后判斷sessionStorage中是否有存儲來源路由，如果有就跳轉到這個路由
//獲取來源頁路由
var referrer = sessionStorage.getItem('referrer');
if(referrer != null){
this.$router.push(referrer)
}else {
this.$router.push('/home')
} 看完上述內容，是不是對Vue如何實現登錄后繼續跳轉指定頁面有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
