vue router路由自定义后退事件,并通知下个路由为后退

5,991 阅读3分钟

开发过程中发现router和history都不会提供后退事件标识,并且很多时候我们并不想要后退历史,而是后退页面层级。

并且在页面跳转过程中如果使用go(-1),back()这种事件还容易出现循环后退这种场景。如:z->a->b->a;在这样情况如果在a,b中使用后退,将会按照浏览器历史后退,那么a/b页面就会循环,而我们在a页面实际是想要退回到z。
同时vue router还是浏览器都没有地方判断是否为后退场景,我们很多页面在用户体验上是要区分是否为后退的。

所以为了解决这个问题我在router上面增加了一段逻辑来实现记录路由轨迹,不同与浏览器记录的历史我们不需要记录用户操作的全部记录。我们只需要关注用户操作的路由的先后顺序即可。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

let router = new Router({
  routes: [
   ...
  ]
})

// 记录用户浏览页面的地址的轨迹
router.routesArr = []
// 后退到上一层页面,不是上一个历史
router.backward = function (stepNum) {
  typeof stepNum !== 'number' && (stepNum = 1)
  stepNum = Math.abs(stepNum)
  let index = router.routesArr.length - 1 - stepNum
  let route = router.routesArr[0]
  if (index > 0) {
    route = router.routesArr[index]
  }
  router.push({
    name: route.name,
    // path: route.path,
    params: { isBack: true },
    query: route.query
  })
}
// 判断某一个路由是否在轨迹中出现
router.getIndexOf = path => {
  for (let i in router.routesArr) {
    let route = router.routesArr[i]
    if (route.path === path) {
      return i
    }
  }
  return -1
}
// 记录用户浏览页面的地址的轨迹,只保留单一节点
router.afterEach((to, from) => {
  let index = router.getIndexOf(to.path)
  if (index !== -1) {
    router.routesArr.splice(index, 900)
  }
  router.routesArr.push(to)
})

export default router

记录轨迹

// 记录用户浏览页面的地址的轨迹,只保留单一节点
router.afterEach((to, from) => {
  let index = router.getIndexOf(to.path)
  if (index !== -1) {
    router.routesArr.splice(index, 900)
  }
  router.routesArr.push(to)
})

我们需要记录路由的轨迹,并且还得保存路由的数据,不然后退是参数就会丢失了。这里使用的全局后置钩子函数。注意了,每个路由只保留一次,并且从先后层级上,只留下当前路由及以前的层级。

假使当前轨迹为:z->a->b->c->d,d为当前路由

  1. 后backward()或者go(-1)到c,路由轨迹变为:z->a->b->c
  2. 再push到a,路由轨迹不是变成z->a->b->c->a,而是z->a
  3. 再push到b,路由轨迹变为:z->a->b
    这个记录是不允许重复的,出现重复则轨迹后退到历史的某一个点。

前进事件实话说代码中使用的不多,这里就不处理了,用push就行

后退事件并标记

router.backward = function (stepNum) {
  typeof stepNum !== 'number' && (stepNum = 1)
  stepNum = Math.abs(stepNum)
  let index = router.routesArr.length - 1 - stepNum
  let route = router.routesArr[0]
  if (index > 0) {
    route = router.routesArr[index]
  }
  router.push({
    name: route.name,
    // path: route.path,
    params: { isBack: true },
    query: route.query
  })
}

这里的后退事件不是浏览器历史了,而是路由的先后轨迹
然后找到对应后退的路由信息,利用push事件将页面跳转过去,同时携带数据,并传递后退标记。

使用

//后退
goback () {
      this.$router.backward()
    }
    
    
    // 判断是否为后退
if (this.$route.params.isBack) {
  this.transitionEffect = ''
}else {
  this.transitionEffect = 'slideInRight'    
}