How to use vue mobile routing switching

This time I will show you how to use vue mobile routing switching, what are the precautions when using vue mobile routing switching, the following is a practical case, let's take a look.

The most important of these are the following two issues:

Switching of the browser navigation bar

When sliding to switch on IOS, there will be two page transition animations. A switch is performed when it slides by itself, and then triggers the transition animation we set.

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

You can see the actual written effect: Online DEMO

1. Switching the browser navigation bar

Compare and judge by recording history Forward or backward

The following example

A page-> B page-> C page

If I go from page A to page B and then When you go to the C page, 3 historical records will be generated

We use an array to represent: ['/a', '/b', '/c']

Then I click Using 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']

As long as we click For the forward button, let's look for it in the saved path. If we can't find the path, then the forward judgment will be completed.

The above is a normal situation.
But what if we enter some pages repeatedly.

Just like the following situation

A page-> B page-> C page-> B page-> C page

Now we take 5 steps and reach the second C page, then we take a step back and reach the B page

The question arises at this time, should we delete the path behind the first B page or Delete the path behind the second B page

We first try to delete the path of the second B page, then the paths we still save are: ['/a', '/b', '/c ', '/b'].

1. At this time, we operate according to the logic of the above normal situation.

I click forward, and then I search in the saved path. If I can’t find it, I will go forward. If I find the proof, I will go back. .

The result is obvious. We have found the first C page, so even if we go back, but in fact when I click it, we go forward

2. Then let’s try to delete the first B The path behind the page, then the saved path is: ['/a', '/b'],

Then when I click the back button, it will actually enter page C. We can see the following process Picture

At this time, if we click the back button here, we will go to the C page, but the `'/c'` in the saved path has been deleted by me, so I judge What comes out is forward.

1. Would it be better if we filtered duplicate page paths? In fact, it is the same.

If we have 5 page paths and filtered 2 duplicates, only If there are 3 page paths

then I can’t find it when I return to the fourth path, then the next two pages will be counted as forward.

So from the current point of view, the best way is to record each page, but make each page different

Then we can put a random ## on the url #String

Code implementation:

// 当没有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()
 }
})

With the above code, we can add a random string of APP_KEY to the URL, so that even if the same page is in the path we save, it will actually be different. The logic can be executed normally

The above basically solves the problem of the browser navigation bar

2. Sliding switching on IOS

On the IOS web page, you can slide left and right to switch, even if you don't do a transition animation.

A problem will arise at this time.

Still ABC page

A -> B -> C

When 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.

That will trigger our transition animation. You will find that two switches are performed.

So I found a method on the Internet to fix ios and slide left to execute the animation again#2259

The code is like this

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 take To 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 is less than 337, even if it is an IOS sliding switch

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 sliding left to return 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

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:

How to use js to encapsulate ajax function functions and usage

What are the commonly used mathematical functions in JS?

The above is the detailed content of How to use vue mobile routing switching. For more information, please follow other related articles on the PHP Chinese website!