Vue 모바일 단말 라우팅 전환 사례 분석

이번에는 Vue 모바일 라우팅 전환 사례 분석을 가져오겠습니다. Vue 모바일 라우팅 전환 시 주의사항은 무엇인가요?

그 중 가장 중요한 것은 다음 두 가지 문제입니다.

브라우저 탐색 표시줄 전환

iOS를 켜기 위해 슬라이드할 때 페이지 전환 애니메이션이 두 개 있는데, 하나는 자체적으로 슬라이드할 때 전환되고, 그 다음에는 트리거 전환 애니메이션을 설정합니다.

위 두 가지 질문을 제외한 나머지 작업은 페이지 내에서 설정이 가능하며 기본적으로 제어가 가능합니다. 주로 위의 두 가지 문제를 해결합니다.

실제 작성된 효과를 볼 수 있습니다: 온라인 DEMO

1. 브라우저 탐색 표시줄 전환

과거 기록을 기록하여 앞으로 갈지 뒤로 갈지 비교하고 판단합니다

다음 예

A 페이지-> 페이지 B-> 페이지 C

A 페이지에서 B 페이지로 이동한 다음 C 페이지로 이동하면 3개의 기록이 있습니다.

배열을 사용하여 다음을 나타냅니다. , '/b' , '/c']

그런 다음 브라우저 탐색 모음에서 뒤로 버튼을 클릭하면 B 페이지로 돌아갑니다.

이때 B 페이지가 존재하는지 여부만 확인하면 됩니다. 내가 뒤로 버튼을 눌렀다는 것을 증명합니다.

그런 다음 돌아가자마자 브라우저의 앞으로 버튼을 클릭할 수 있습니다. 현재 진행중인지 여부를 판단하는 방법은 무엇입니까?

우리는 할 수 있습니다.

B 페이지로 돌아가면 기록 기록에 여전히 세 경로('/a', '/b', '/c']가 저장되어 있지 않나요?

B 페이지 뒤의 경로를 삭제할 수 있으므로 이제 그것은 [ '/a', '/b'];
페이지 A로 돌아가면 우리가 저장하는 경로는 ['/a']입니다

앞으로 버튼을 클릭한 만큼 저장된 경로를 찾아 찾아보시죠? 경로를 찾을 수 없으므로 전방 판단이 완료됩니다.

위의 상황은 정상적인 상황입니다.
하지만 일부 페이지를 반복해서 입력하면 어떻게 될까요?

다음 상황과 같습니다

A 페이지-> 그리고 한걸음 뒤로 물러서서 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 후크 함수에서 위의 논리가 실행됩니다.

이렇게 하면 전환 애니메이션이 실행됩니다. 두 개의 스위치가 수행되는 것을 볼 수 있습니다.

그래서 인터넷에서 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(&#39;UPDATE_ROUTER_DIRECTION&#39;, { routerDirection: &#39;&#39; })
 }
})

위의 내용도 이해하기 쉽습니다. 즉, 손가락이 마침내 화면을 떠나는 순간을 파악하고 이를 이전과 비교합니다.
손가락이 화면을 떠나는 마지막 순간과 마지막 순간의 차이는 다음과 같습니다. 손가락이 화면을 떠나면 우리 자신의 전환이 IOS의 슬라이딩 스위칭임에도 불구하고 각 값이 337보다 작습니다.

그것이 IOS의 슬라이딩 스위칭 문제를 해결합니다.

하지만 IOS가 오른쪽으로 슬라이드하여 전환할 때 손가락이 화면에서 나가는 순간을 모니터링할 수 없으므로(유령이 무엇인지는 모르겠습니다) IOS가 오른쪽으로 슬라이드하여 전환하며 위와 같이 판단할 수 없습니다.

저도 이 문제에 대한 해결책을 찾지 못했습니다. IOS에서는 왼쪽으로 스와이프하여 돌아가는 스위치만 해결할 수 있습니다.

기본적으로 가장 문제가 되는 두 가지 사항은 위의 두 가지 사항입니다. 나머지는 이벤트를 모니터링하여 설정할 수 있는데 전혀 어렵지 않습니다.

온라인 DEMO 시연

이 기사의 사례를 읽어보셨으리라 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

jQuery 클래스 이름 선택기(.class) 사용 방법에 대한 자세한 설명

vue 동적으로 바인딩된 구성 요소 하위 상위 구성 요소 다중 형식 확인 구현 단계

위 내용은 Vue 모바일 단말 라우팅 전환 사례 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!