vue-router登陸校驗後跳轉到以前指定頁面如何實現

　　兩個需求：一、用戶點擊購買須要下單，並跳轉到訂單頁面，可是若是用戶沒有登陸的話，中間有登陸驗證，會攔截；二、點擊購買的時候，登陸校驗成功了，跳轉到訂單頁面時，訂單已建立，去付款便可。三、處理攔截至登陸頁，而後點去註冊頁，完善信息頁，再回登陸頁，再登陸進去，依然進去目標order頁

1、解決方案對1：

　　大概思路：一、當你想進入 http://localhost:8080/order(該頁面須要登陸受權)，二、檢查是否登陸，若是沒有登陸就跳轉到登陸頁，須要將上一頁的path(‘/order’)做爲query存到login頁地址中，如：http://localhost:8080/login?redirect=%2Forder

router.beforeEach((to, from ,next) => { const token = store.getters.userInfo if(to.matched.some(record => record.meta.requireAuth || record.meta.homePages)){ //路由元信息requireAuth:true，或者homePages:true，則不作登陸校驗  next() }else{ if(token){//判斷用戶是否登陸 if(Object.keys(from.query).length === 0){//判斷路由來源是否有query，處理不是目的跳轉的狀況  next() }else{ let redirect = from.query.redirect//若是來源路由有query if(to.path === redirect){//這行是解決next無限循環的問題  next() }else{ next({path:redirect})//跳轉到目的路由  } } }else{ if(to.path==="/login"){ next() }else{ next({ path:"/login", query: {redirect: to.fullPath}//將目的路由地址存入login的query中  }) } } } return })

2、解決方案對2：

　　order有2種狀況進入，一種直接點擊，一種就是上面的跳轉，跳轉須要傳入選取訂單的id，用來建立訂單。

　　大體思路：一、創建2種路由跳轉指向同一個組件；二、經過不一樣路由路徑，在組件內生命週期，執行不一樣的操做

 { path:'/order', name:'order', component:() => import('@/views/system/order') }, { path:'/order/:id', name:'order', component:() => import('@/views/system/order') }

 mounted(){ let _id = this.$route.params.id//看是那種跳轉路徑 if(!_id){ this.fetchData() }else{ orderFromHomeApi(_id).then(res => { if(res.status === 200){ this.fetchData() } }) } }

3、解決方案對3：

router.beforeEach((to, from ,next) => { const token = store.getters.userInfo if(to.matched.some(record => record.meta.requireAuth || record.meta.homePages)){ //處理攔截至登陸頁，而後點去註冊頁，完善信息頁，再回登陸頁，再登陸進去，依然進去目標order頁 if(Object.keys(from.query).length === 0){//不是這種目標攔截的狀況（就from.query是空對象）直接next()  next() }else{ let redirect = from.query.redirect//是目標攔截的狀況，記錄redirect if(to.path === redirect){//這個是處理無限循環的問題  next() }else{ if(Object.keys(to.query).length > 0){//加上query以後，就判斷它有了query，就next()跳轉進去  next() }else{//第一次跳轉to路由是沒有query的，咱們須要加上query來記錄咱們須要的目標路由  next({ path:to.path, query: {redirect: redirect} }) } } } }else{ if(token){ if(Object.keys(from.query).length === 0){ next() }else{ let redirect = from.query.redirect if(to.path === redirect){ next() }else{ next({path:redirect}) } } }else{ if(to.path==="/login"){ next() }else{ next({ path:"/login", query: {redirect: to.fullPath} }) } } } return })