這次帶給大家vue行動端路由切換案例解析，vue行動端路由切換的注意事項有哪些，以下就是實戰案例，一起來看一下。
其中最主要的時以下兩個問題：
瀏覽器導覽列的切換
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頁面後面的路徑
我們先試著刪除第二個B頁面的路徑，那麼我們還保存的路徑就是： ['/a', '/b', '/c', '/b']。
1、那這個時候我們按照上面正常情況的邏輯來操作.
#我點擊前進， 然後我去保存的路徑裡面找，找不到就算前進， 找到證明是後退。
那麼結果顯而易見，我們找到了第一個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示範
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦讀取：
jQuery類別名稱選擇器（.class）使用方法詳解
vue動態綁定元件子父元件多表單驗證實作步驟詳解
以上是vue行動端路由切換案例解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
