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