vue移动端路由切换完整实例

在写移动端时，由于须要给页面作转场动画，便有了此次的研究

其中最主要的时如下两个问题：

1. 浏览器导航栏的切换
2. IOS 上滑动切换时，会有两次页面的转场动画，一次自身滑动时进行的切换，随后触发咱们设置的转场动画。

除了上面两个问题，其他的操做都是能够在页面内进行设置，基本都是可控的。主要就是解决上面两个问题。

能够看下实际写出来的效果：在线DEMO

1. 浏览器导航栏的切换

经过记录 历史记录 来比较判断前进仍是后退

• 以下例子

A页面 -> B页面 -> C页面

假如我从 A页面到 B页面 再到C页面，历史记录就会产生3条

咱们用一个数组表示: ['/a', '/b', '/c']

而后我在经过点击浏览器导航栏的后退按钮， 我便会回到 B 页面，

这时候我只要判断是否存在 B页面， 存在就证实我点的时后退按钮。

而后只要我后退过， 我就能点击浏览器的前进按钮了。这时候怎么判断它究竟是前进的呢。

咱们能够这样。

当咱们后退到了B页面，历史记录不是还保存着['/a', '/b', '/c'] 三个路径吗

咱们能够删除B页面后面的路径，那如今就是 ['/a', '/b']；
若是咱们后退到A页面， 那么咱们保存的路径就是['/a']

只要咱们点击前进按钮， 咱们去保存的路径里面找， 是否是就找不到路径了， 那样就完成了前进判断。

---

上面是一种正常的状况。
可是假如咱们有点页面重复进入了呢。

• 就如如下这种状况

A页面 -> B页面 -> C页面 -> B页面 -> C页面

如今走了5步，到达了第二个C页面， 而后咱们后退一步，到达了B页面
这个时候问题就出来了，咱们是删除第一个B页面后面的路径仍是删除第二个B页面后面的路径

1. 咱们先试着删除第二个B页面的路径，那么咱们还保存的路径就是： ['/a', '/b', '/c', '/b']。
   那这个时候咱们按照上面正常状况的逻辑来操做.
   我点击前进， 而后我去保存的路径里面找，找不到就算前进， 找到证实是后退。
   那么结果显而易见，咱们找到了第一个C页面，那就这样就算后退了，但其实我点击的时前进
2. 那咱们试着删除第一个B页面后面的路径，那么保存的路径就是： ['/a', '/b'],
   那么我在点击后退按钮，这时候他其实会进入C页面， 咱们能够看如下流程图

这个时候咱们在此点击后退按钮，就会到C页面， 可是保存的路径里面 `'/c'` 已经被我删除了, 因此判断出来的是前进。

1. 若是咱们过滤重复的页面路径，是否是就会好了呢，其实也是同样的
   假如咱们有5个页面路径，过滤了2个重复的，只有3个页面路径了
   那么我退到第四个路径的时候是否是就找不到了， 那么后面两个页面都会算做前进。

因此以目前来看，最好的办法就是记录每个页面，可是每一个页面，都让他有区别
那么咱们就能够在url上面放一个随机字符串

代码实现：

// 当没有key的时候会进入两次 beforeEach,咱们只需保存带key的就行
const updateNavigations = (to) => {
    if (to.query[pathKey]) {
        store.commit('UPDATE_NAVIGATIONS', {path: to.fullPath})
    }
}

router.beforeEach((to, from, next) => {
    let toIndex = store.state.navigations.findIndex(path => path === to.fullPath)
    if (toIndex >= 0) { // 存在该路径
        let len = store.state.navigations.length-1
        if (toIndex === len) { // 当前路径是最后一条，证实是同一个页面
            console.log('refresh') 
        } else { // 后退
            store.commit('UPDATE_ROUTER_DIRECTION', { routerDirection: 'back' }) // 后退标志
            store.commit('DELETE_NAVIGATION', { index: toIndex }) // 删除当前路径后面的路径
        }
    }else{ // 不存在该路径
        store.commit('UPDATE_ROUTER_DIRECTION', { routerDirection: 'forward' }) // 前进标志
        updateNavigations(to) // 保存该链接
    }

    const query = { ...to.query }
    // 存在就直接next， 防止死循环
    if (!query['APP_KEY']) { // 不存在添加key ，再次 next
        query['APP_KEY'] = Math.random().toString(16).substring(2)
        next({ path: to.path, query})
    }else{
        next()
    }
})

以上代码咱们就能就url中添加一个 APP_KEY 的随机串,那样就算同一个页面在咱们保存的路径里面也是实际上是不一样的。就能够正常的执行逻辑了
上面就基本解决了浏览器导航栏的问题了

2. IOS上的滑动切换

在IOS的网页上， 是能够左右滑动进行切换，即便你没有作转场动画。
这个时候就会出现一个问题。

• 仍是ABC页面

A -> B -> C

当咱们到达C页面，而后向左滑动时，滑完他就进入B页面，可是这这时它仍是会进入咱们的 beforeEach 这个钩子函数里面，执行咱们上面的逻辑。
那样就会触发咱们的转场动画。你就会发现执行了两次切换。

因而我在网上找到了一种方法 fix ios左滑再次执行动画 #2259

代码是这样的

let touchEndTime = Date.now()

window.addEventListener('touchend', () => {
    touchEndTime = Date.now()
})

router.beforeEach((to, from, next) => {
    if ((Date.now() - touchEndTime) < 377) { // ios滑动切换
        store.commit('UPDATE_ROUTER_DIRECTION', { routerDirection: '' })
    }
})

上面也很好理解， 就是咱们取到手指最后离开的屏幕的那一刻， 而后在到 beforeEach里面进行比较，
当手指离开屏幕的最后一刻跟咱们本身 beforeEach里面进行的转场相差小于 337, 就算是IOS的滑动切换

那样就解决了IOS的滑动切换问题了。

可是IOS的右滑切换时监听不到手指离开屏幕的那一刻的（也不知道是什么鬼）， 因此IOS的右滑切换，是无法像上面那样判断的。
这个我也没找到解决办法， 暂时只能解决IOS左滑返回的切换。

基本上遇到的比较麻烦的两个点就是上面这两个点了，其他都是能够经过监听事件进行设置，倒也没什么难度

在线DEMO演示

github: DEMO源码

我的博客