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

栏目: JavaScript · 发布时间: 5年前

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

开发过程中发现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->b

d->b就是后退到b:轨迹由z->a->b->c->d变为z->a->b

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

后退事件并标记

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'    
}
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Design systems

Design systems

Not all design systems are equally effective. Some can generate coherent user experiences, others produce confusing patchwork designs. Some inspire teams to contribute to them, others are neglected. S......一起来看看 《Design systems》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具