Vue mobile terminal complete example of route switching

This study came about when I was writing for mobile, because I needed to animate the page

Among them, the following two issues are the most important:

Switch the browser navigation bar
When you swipe to switch on IOS, there will be two transitions of the page, one when you swipe, and then the transitions we set will be triggered.

Except for the above two problems, the rest of the operations can be set within the page, are basically controllable. Mainly to solve the above two problems.

You can see the effect of the actual writing: online DEMO

1. Switch the browser navigation bar

Use historical records to compare advances and retreats

The following example

Page A > Page B > Page C

If I go from page A to page B to page C, there are three historical records

We use an array: [‘/a’, ‘/b’, ‘/c’]

And then I click the back button in the browser navigation bar, and I go back to page B,

At this time, I just need to judge whether there is a PAGE B, which proves that I clicked the back button.

And then as soon as I go back, I can hit the forward button in my browser. How do you tell if it’s going forward?

We could do this.

When we go back to page B, doesn’t the history still hold three paths [‘/a’, ‘/ B ‘, ‘/c’]

[‘/a’, ‘/ B ‘]; If we go back to page A, the path we save is [‘/ A ‘].

As long as we click the forward button, we go to save the path to find, is not to find the path, so that the completion of the forward judgment.

This is a normal situation. But what if we have a little bit of page repetition.

As in the following case

Page A > PAGE B > Page C > Page B > Page C

Now we take five steps, we get to the second C page, and then we take a step back, we get to the B page and the question comes up, do we delete the path after the first B page or do we delete the path after the second B page

We first try to delete the path of the second B page, so we also save the path: [‘/a’, ‘/ B ‘, ‘/c’, ‘/ B ‘]. In this case we follow the normal logic above. I click forward, and then I go to save the path to find, if not find forward, find the proof is backward. So the result is obvious, we found the first C page, so that’s backwards, but actually WHEN I click forward
[‘/a’, ‘/ B ‘], then when I click the back button, it will actually go to the C page, we can see the following flow chart

At this point, we click the back button here, which will take us to page C, but in the save path'/c'It’s been deleted by me, so the judgment is forward.
If we filter out duplicate page paths, wouldn’t it be better? Well, it’s the same thing if we have 5 page paths, and we filter out 2 duplicate page paths, and we only have 3 page paths then I can’t find them when I go back to the fourth path, and then the next two pages count as progress.

So for now, the best thing to do is to record every page, but every page, make it different so we can put a random string on top of the URL

Code implementation:

Const updateNavigations = (to) => {const updateNavigations = (to) => {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) {// The path existslet len = store.state.navigations.length-1
        if(toIndex === len) {// The current path is the last one, proving that it is the same page console.log('refresh')}else{// back up store.mit ('UPDATE_ROUTER_DIRECTION', { routerDirection: 'back'}) // Back flag store.mit ('DELETE_NAVIGATION', {index: toIndex}) // Delete path after current path}}else{// the path does not exist. Store.mit ('UPDATE_ROUTER_DIRECTION', { routerDirection: 'forward'}) // updateNavigations(to) To.query} // If it exists, go directly to next to prevent an infinite loopif(! query['APP_KEY']) {// Add key not found, next query['APP_KEY'] = Math.random().toString(16).substring(2)
        next({ path: to.path, query})
    }else{
        next()
    }
})
Copy the code

In this code we can add a random string of APP_KEY to the URL, so that even the same page in our saved path is actually different. You can execute your logic normally and you’ve basically solved the browser navigation bar problem

2. Swiping on IOS

On IOS web pages, you can swipe left and right to switch, even if you’re not animating a transition. This is where a problem arises.

ABC page again

A -> B -> C

When we get to page C and swipe left, it goes to page B, but it still goes into our beforeEach hook function to perform the logic above. That will trigger our transition animation. You’ll notice that you’ve done two switches.

So I found a way to fix ios left swipe to perform animation #2259 again on the Internet

The code looks like this

let touchEndTime = Date.now()

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

router.beforeEach((to, from, next) => {
    if((date.now () -touchendTime) < 377) {'UPDATE_ROUTER_DIRECTION', { routerDirection: ' '})}})Copy the code

It is also easy to understand the above, that is, we take the last moment when the finger leaves the screen, and then compare it in beforeEach. The difference between the last moment when the finger leaves the screen and the transition in our own beforeEach is less than 337, even for IOS sliding switch

That solves the problem of swiping on IOS.

However, IOS right swipes don’t detect the moment the finger leaves the screen, so IOS right swipes don’t detect the same way. I have not found a solution to this, but can only solve the IOS left swipe back switch.

Basically, the two points that are more difficult to encounter are the above two points, the rest can be set by listening to the event, but it is not difficult

Online DEMO

Making: DEMO source code

Personal blog

Vue mobile terminal complete example of route switching