This time I will bring you an analysis of the vue mobile routing switching case. What are the precautions for vue mobile routing switching? The following is a practical case, let's take a look.
The most important of them are the following two problems:Switching of the browser navigation bar1. Switching the browser navigation bar
A page-> B page-> C pageIf I go from page A to page B and then to page C, there will be 3 historical recordsWe use an array to represent: ['/a', '/b', '/c']Then when I click the back button on the browser navigation bar, I will return to page B. At this time, I only need to determine whether page B exists. If it exists, it proves that I clicked the back button. . Then as long as I go back, I can click the browser's forward button. How to judge whether it is moving forward at this time? We can do this. When we go back to page B, doesn’t the history record still save the three paths ['/a', '/b', '/c']?We can delete page B The following path is now ['/a', '/b'];
If we go back to page A, then the path we save is ['/a']
But what if we enter some pages repeatedly.
A page-> B page-> C page-> B page-> C pageNow we take 5 steps and reach the second C page, then we take a step back and reach the B page
// 当没有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() } })
2. Sliding switching on IOS
A -> B -> CWhen we reach the C page and then slide to the left, finish sliding him Just enter the B page, but at this time it will still enter our beforeEach hook function and execute our above logic.
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: '' }) } })
The above is also easy to understand, that is, we get the moment when the finger finally leaves the screen, and then compare it in beforeEach.
The difference between the last moment when the finger leaves the screen and our own transition in beforeEach Less than 337, even if it is the sliding switching of IOS
, that will solve the sliding switching problem of IOS.
But when IOS slides right to switch, it cannot monitor the moment when the finger leaves the screen (I don’t know what the ghost is), so IOS slides right to switch and cannot be judged as above.
I haven’t found a solution to this. For the time being, I can only solve the switch of left swiping back in IOS.
Basically, the two most troublesome points are the above two points. The rest can be set by listening to events, which is not difficult
Online DEMO Demonstration
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Detailed explanation of how to use jQuery class name selector (.class)
#
The above is the detailed content of Vue mobile terminal routing switching case analysis. For more information, please follow other related articles on the PHP Chinese website!