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