vue-router登錄校驗后跳轉到之前指定頁面如何實現

　　兩個需求：1、用戶點擊購買需要下單，並跳轉到訂單頁面，但是如果用戶沒有登錄的話，中間有登錄驗證，會攔截；2、點擊購買的時候，登錄校驗成功了，跳轉到訂單頁面時，訂單已創建，去付款即可。3、處理攔截至登錄頁，然后點去注冊頁，完善信息頁，再回登錄頁，再登錄進去，依然進去目標order頁

一、解決方案對1：

　　大概思路：1、當你想進入 http://localhost:8080/order(該頁面需要登錄授權)，2、檢查是否登錄，如果沒有登錄就跳轉到登錄頁，需要將上一頁的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：

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

　　大致思路：1、建立2種路由跳轉指向同一個組件；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：

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 })