在開發中我們經常遇到這樣的需求，需要使用者登入後才可以訪問該頁面，如果使用者沒有登入點選該頁面時則自動跳轉到登入頁面，登入後又跳轉到連結的頁面而不是首頁，這種問題該如何去做呢？

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,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登入攔截 登入後繼續跳轉指定頁面的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。