基于vue-router的移动端网页的路由管理

本篇代码示例:github

前提：不关注移动端浏览器的前进事件

涵盖功能：
　1，管理路由的历史记录

　2，切页动画的实现

　3，处理流程类页面的回退事件

描述：

流程类页面的回退事件的解释：
　以注册页面举例，为了拉长整个流程，把输入项分开。以下是整个流程(懒得画图，大家将就看)

　1.首页 - 点击首页注册按钮可进入注册输入页

　2.注册输入页 - 输入姓名

　3.注册输入页 - 输入电话

　4.提交注册页 - 点击提交按钮，获取注册状态(成功或者失败),如果成功，则跳转到指定页面(假定是产品页)

　5.产品页

　以上是一个简单的注册的流程，现在写一下业务场景和需求

　1，注册未完成时

　　注册未完成时，页面可能处于 1,2,3,4 这几个页面，此时，点击返回(无论是页面本身自带的返回，还是浏览器或者设备-[如安卓]的返回键触发的返回) 均可回到上一页

　2.注册完成时

　　指注册成功并已经进入 5 页面，此时，点击返回（浏览器或者设备-[如安卓]的返回键触发的返回），回到 4 页面之后，要求直接跳回 1 页面

准备工作

　1.切页动画的实现

　　切页动画使用vue自带的过渡效果 transition 实现，这个是附带的，这里不讲，大家自己看代码，代码如下

<template>
  <div class="wapper">
    <transition :name="transition">
      <router-view class="child-view"></router-view>
    </transition>
  </div>
</template>

<script>

export default {
  name: 'tableDemo',
  data () {
    return {
      transition: 'slide-left'
    }
  },
  methods: {
    doSomething (e) {
      this.$router.delLastRouter() // 页面回退时，路由做对应的处理
    }
  },
  created () {
    window.addEventListener('popstate', this.doSomething, false) // 监听回退事件
  },
  beforeRouteUpdate (to, from, next) {
    window.document.title = to.meta.title
    let isBack = this.$router.isBack
    if (isBack) {
      this.transition = 'slide-right'
      next()
    } else {
      // 进入页面之前判断是否是进入流程页
      if (from.meta.isStartPage) {
        this.$router.setProcessStatus(to.meta.group, false)
      }
      this.transition = 'slide-left'
      next()
    }
  }
}
</script>

<style lang="scss">
.wapper { position: relative; width: 100%; height: 100%;}
.child-view { position: absolute; width:100%; height: 100%;}
.slide-left-leave { -webkit-transform: translate(0, 0); transform: translate(0, 0);}
.slide-left-leave-active { transition: all .4s cubic-bezier(.55,0,.1,1);}
.slide-left-leave-to { -webkit-transform: translate(100%, 0); transform: translate(100%, 0);}
.slide-left-enter { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0);}
.slide-left-enter-active { transition: all .4s cubic-bezier(.55,0,.1,1);}
.slide-left-enter-to { -webkit-transform: translate(0, 0); transform: translate(0, 0);}

.slide-right-leave { -webkit-transform: translate(0, 0); transform: translate(0, 0);}
.slide-right-leave-active { transition: all .4s cubic-bezier(.55,0,.1,1);}
.slide-right-leave-to { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0);}
.slide-right-enter { -webkit-transform: translate(100%, 0); transform: translate(100%, 0);}
.slide-right-enter-active { transition: all .4s cubic-bezier(.55,0,.1,1);}
.slide-right-enter-to { -webkit-transform: translate(0, 0); transform: translate(0, 0);}

</style>

　2.路由的管理

　　1. 为vue-router设置一些状态

Router.prototype.routerArray = []; // 存储过往的路由信息
Router.prototype.processArray = []; // 存储流程页的状态
Router.prototype.isBack = false; // 是否是返回，动画使用

　　2. 使用 beforeRouteUpdate 来检查路由的变化这里要注意的事情是 beforeRouteUpdate 只针对子路由生效，所以这段代码放在父路由指向的页面中

　　在这个页面，我们通过 this.$router.isBack 来区分页面是前进还是后退，并调整对应的动画效果。

beforeRouteUpdate (to, from, next) {
    window.document.title = to.meta.title
    let isBack = this.$router.isBack
    if (isBack) {
      this.transition = 'slide-right'
      next()
    } else {
      // 进入页面之前判断是否是进入流程页
      if (from.meta.isStartPage) {
        this.$router.setProcessStatus(to.meta.group, false)
      }
      this.transition = 'slide-left'
      next()
    }
  }

　　3. 重写路由的push方法在push方法中如果push指向的页面已经存在于历史记录中，则当做返回处理，前进则为历史记录添加一条数据

// 修改 Router本身的push， 跳转之前做一些判断
    let lPush = Router.prototype.push;
    Router.prototype.push = function (location, onComplete, onAbort) {
      let lGoCount = this.havRouterHistory(location)
      if (lGoCount < 0) {
        this.isBack = true
        this.go(lGoCount);
      } else {
        this.isBack = false
        this.routerArray.push(this.history.current)
        lPush.call(this, location, onComplete, onAbort)
      }
    };

　　4.重写路由的go方法

// 重写 Router 本身的 go， 回退的同时要清空记录中的数据
    let lGo = Router.prototype.go
    Router.prototype.go = function (n) {
      if (n > 0) {
        lGo.call(this, n);
        return;
      }
      let lLen = 0 - n;
      lLen = this.routerArray.length > lLen ? lLen : this.routerArray.length;
      let lStart = this.routerArray.length - lLen;
      this.routerArray.splice(lStart, lLen);
      lGo.call(this, n);
    };

　　5.判断 push 时指向的页面是否存在于历史记录中

// 判断历史记录中是否存在将要跳转的路由，如果有，执行回退操作
    Router.prototype.havRouterHistory = function (location) {
      // debugger
      let lPath = location.path;
      let lName = location.name;
      let lLen = this.routerArray.length;
      for (let i = 0; i < lLen; i++) {
        if (this.routerArray[i].path === lPath || this.routerArray[i].name === lName ) {
          return i - lLen; // 存在则返回应该回退的步数，注意回退的步数是负值
        }
      }
      return 1 // 如果存在则必然小于0，所以这里写返回1代表不存在没有问题
    };

　　6.浏览器或者设备物理键触发回退

　　在父路由页面设置全局的事件监听，在触发事件的时候处理路由

methods: {
    doSomething (e) {
      this.$router.delLastRouter() // 页面回退时，路由做对应的处理
    }
  },
  created () {
    window.addEventListener('popstate', this.doSomething, false) // 监听回退事件
  },

// 浏览器回退时，清除最后一条路由数据  这串代码在 路由配置文件 中
    Router.prototype.delLastRouter = function () {
      this.routerArray.pop()
    }

　　7. 路由本身的回退事件无需对路由的back事件做处理，因为vue-router本身的back 调用的 go(-1) go函数我们已经重写过了

　　8.根据流程相关页面，对路由做相对应的配置

　　isStartPage: true // 表示这是一个流程入口页，相当于上面的页面1

　　group // group分组，代表了一组页面同属于一个流程中

/**
 * 返回效果的Demo
 */
export default [
  {
    path: '/backDemoIndex',
    name: 'backDemoIndex',
    component: r => require.ensure([], () => r(require('../../Page/BackDemo/index')), 'BackDemo/index'),
    meta: { title: '入口选择页面' }
  },
  {
    path: '/backAPage',
    name: 'backAPage',
    component: r => require.ensure([], () => r(require('../../Page/BackDemo/aPage')), 'BackDemo/aPage'),
    meta: { title: '操作起始页面aaaaa', isStartPage: true }
  },
  {
    path: '/backAPageA',
    name: 'backAPageA',
    component: r => require.ensure([], () => r(require('../../Page/BackDemo/aPagea')), 'BackDemo/aPagea'),
    meta: { title: '操作起始页面bbb', isStartPage: true }
  },
  {
    path: '/backAPageB',
    name: 'backAPageB',
    component: r => require.ensure([], () => r(require('../../Page/BackDemo/aPageb')), 'BackDemo/aPageb'),
    meta: { title: '操作起始页面CCC', isStartPage: true }
  },
  {
    path: '/backBPage',
    name: 'backBPage',
    component: r => require.ensure([], () => r(require('../../Page/BackDemo/bPage')), 'BackDemo/bPage'),
    meta: { title: '第一个输入页面', group: 'backDemo' }
  },
  {
    path: '/backCPage',
    name: 'backCPage',
    component: r => require.ensure([], () => r(require('../../Page/BackDemo/cPage')), 'BackDemo/cPage'),
    meta: { title: '第二个输入页面', group: 'backDemo' }
  },
  {
    path: '/backDPage',
    name: 'backDPage',
    component: r => require.ensure([], () => r(require('../../Page/BackDemo/dPage')), 'BackDemo/dPage'),
    meta: { title: '结果页面', group: 'backDemo' }
  },
  {
    path: '/other',
    name: 'other',
    component: r => require.ensure([], () => r(require('../../Page/BackDemo/other')), 'BackDemo/other'),
    meta: { title: '结果页面' }
  }
]

　　9.在流程起始页进入流程页是，修改流程的状态

　　this.$router.setProcessStatus( ‘backDemo’, false) // groupName 流程分组名称 status 流程状态 true为已经完成 false 为未完成

// 修改一个流程的状态
    Router.prototype.setProcessStatus = function (groupName, status) {
      this.processArray[groupName] = status
    };

　　10.在每个流程页检查流程的完成情况

　　this.$router.onPageLoad()

// 找到最近的入口页面
    Router.prototype.findInsterPage = function () {
      let lLen = this.routerArray.length;
      for (let i = lLen - 1; i >= 0; i--) {
        if (this.routerArray[i].meta.isStartPage) {
          return i - lLen
        }
      }
      return 1; // 如果存在则必然小于0，所以这里写返回1代表不存在没有问题
    }

    // 如果进入一个流程页，并且该页面的状态已经是完成，则应该回退到最近的流程入口页面，或者 跳转到指定的页面
    Router.prototype.onPageLoad = function (query) {
      // debugger
      if (this.history.current.meta.group) {
        let lNowRouter = this.history.current.meta.group
        let lStatus = this.processArray[lNowRouter]
        if (lStatus) {
          let lRes = this.findInsterPage()
          if (lRes < 0) {
            this.go(lRes)
          }
        }
      }
    };

　　11. 在流程结果处理页面，更改流程状态为完成 this.$router.setProcessStatus( ‘backDemo’, true)

基于vue-router的移动端网页的路由管理

猜你喜欢