您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關vue中怎么切換移動端路由,小編覺得挺實用的,因此分享給大家學習,希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
1. 瀏覽器導航欄的切換
通過記錄 歷史記錄 來比較判斷前進還是后退
如下例子
A頁面 -> B頁面 -> C頁面
假如我從 A頁面到 B頁面 再到C頁面,歷史記錄就會產生3條
我們用一個數(shù)組表示: ['/a', '/b', '/c']
然后我在通過點擊瀏覽器導航欄的后退按鈕, 我便會回到 B 頁面,
這時候我只要判斷是否存在 B頁面, 存在就證明我點的時后退按鈕。
然后只要我后退過, 我就能點擊瀏覽器的前進按鈕了。這時候怎么判斷它到底是前進的呢。
我們可以這樣。
當我們后退到了B頁面,歷史記錄不是還保存著['/a', '/b', '/c'] 三個路徑嗎
我們可以刪除B頁面后面的路徑,那現(xiàn)在就是 ['/a', '/b'];
如果我們后退到A頁面, 那么我們保存的路徑就是['/a']
只要我們點擊前進按鈕, 我們去保存的路徑里面找, 是不是就找不到路徑了, 那樣就完成了前進判斷。
上面是一種正常的情況。
但是假如我們有點頁面重復進入了呢。
就如以下這種情況
A頁面 -> B頁面 -> C頁面 -> B頁面 -> C頁面
現(xiàn)在走了5步,到達了第二個C頁面, 然后我們后退一步,到達了B頁面
這個時候問題就出來了,我們是刪除第一個B頁面后面的路徑還是刪除第二個B頁面后面的路徑
我們先試著刪除第二個B頁面的路徑,那么我們還保存的路徑就是: ['/a', '/b', '/c', '/b']。
1、那這個時候我們按照上面正常情況的邏輯來操作.
我點擊前進, 然后我去保存的路徑里面找,找不到就算前進, 找到證明是后退。
那么結果顯而易見,我們找到了第一個C頁面,那就這樣就算后退了,但其實我點擊的時前進
2、那我們試著刪除第一個B頁面后面的路徑,那么保存的路徑就是: ['/a', '/b'],
那么我在點擊后退按鈕,這時候他其實會進入C頁面, 我們可以看以下流程圖
這個時候我們在此點擊后退按鈕,就會到C頁面, 但是保存的路徑里面 `'/c'` 已經被我刪除了, 所以判斷出來的是前進。
1、如果我們過濾重復的頁面路徑,是不是就會好了呢,其實也是一樣的
假如我們有5個頁面路徑,過濾了2個重復的,只有3個頁面路徑了
那么我退到第四個路徑的時候是不是就找不到了, 那么后面兩個頁面都會算作前進。
所以以目前來看,最好的辦法就是記錄每一個頁面,但是每個頁面,都讓他有區(qū)別
那么我們就可以在url上面放一個隨機字符串
代碼實現(xiàn):
// 當沒有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, 防止死循環(huán) 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 的隨機串,那樣就算同一個頁面在我們保存的路徑里面也是其實是不同的。就可以正常的執(zhí)行邏輯了
上面就基本解決了瀏覽器導航欄的問題了
2. IOS上的滑動切換
在IOS的網頁上, 是可以左右滑動進行切換,即使你沒有做轉場動畫。
這個時候就會出現(xiàn)一個問題。
還是ABC頁面
A -> B -> C
當我們到達C頁面,然后向左滑動時,滑完他就進入B頁面,但是這這時它還是會進入我們的 beforeEach 這個鉤子函數(shù)里面,執(zhí)行我們上面的邏輯。
那樣就會觸發(fā)我們的轉場動畫。你就會發(fā)現(xiàn)執(zhí)行了兩次切換。
于是我在網上找到了一種方法fix ios左滑再次執(zhí)行動畫 #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的右滑切換時監(jiān)聽不到手指離開屏幕的那一刻的(也不知道是什么鬼), 所以IOS的右滑切換,是沒法像上面那樣判斷的。
這個我也沒找到解決辦法, 暫時只能解決IOS左滑返回的切換。
以上就是vue中怎么切換移動端路由,小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。