Vue 모바일 라우팅 스위칭 사용 방법
- php中世界最好的语言원래의
- 2018-05-30 09:35:581938검색
이번에는 Vue 모바일 라우팅 스위칭 사용법과 Vue 모바일 라우팅 스위칭 사용 시 주의사항에 대해 알려드리겠습니다. 다음은 실제 사례입니다.
그 중 가장 중요한 것은 다음 두 가지 문제입니다.
브라우저 탐색 표시줄 전환
슬라이드하여 IOS를 켜면 두 개의 페이지 전환 애니메이션이 발생합니다. 하나는 저절로 슬라이딩할 때 전환되고 설정이 트리거됩니다. 전환 애니메이션.
위 두 가지 질문을 제외한 나머지 작업은 페이지 내에서 설정이 가능하며 기본적으로 제어가 가능합니다. 주로 위의 두 가지 문제를 해결합니다.
실제 작성된 효과를 볼 수 있습니다: 온라인 DEMO
1. 브라우저 탐색 표시줄 전환
기록을 기록하여 앞으로 갈지 뒤로 갈지 비교하고 판단하세요
다음 예
A페이지-> ; B 페이지 -> C 페이지
A 페이지에서 B 페이지로 이동한 다음 C 페이지로 이동하면 3개의 기록이 있습니다.
배열을 사용하여 다음을 나타냅니다: ['/a', '/b' , '/c']
그런 다음 브라우저 탐색 모음에서 뒤로 버튼을 클릭하면 B 페이지로 돌아갑니다.
이번에는 B 페이지가 존재하는지 여부만 확인하면 됩니다. 뒤로 버튼.
그런 다음 돌아가자마자 브라우저의 앞으로 버튼을 클릭할 수 있습니다. 현재 진행중인지 여부를 판단하는 방법은 무엇입니까?
우리는 할 수 있습니다.
B 페이지로 돌아가면 기록 기록에 여전히 세 경로('/a', '/b', '/c']가 저장되어 있지 않나요?
B 페이지 뒤의 경로를 삭제할 수 있으므로 이제 그것은 [ '/a', '/b'];
페이지 A로 돌아가면 우리가 저장하는 경로는 ['/a']입니다
앞으로 버튼을 클릭한 만큼 저장된 경로를 찾아 찾아보시죠? 경로를 찾을 수 없으므로 전방 판단이 완료됩니다.
위의 상황은 정상적인 상황입니다.
하지만 일부 페이지를 반복해서 입력하면 어떻게 될까요?
다음 상황과 같습니다
이때 첫 번째 B 페이지 뒤의 경로를 삭제할지, 아니면 B 페이지 뒤의 경로를 삭제할지 의문이 듭니다. 두 번째 B 페이지두 번째 B를 먼저 삭제해 보겠습니다. 페이지 경로와 저장되는 경로는 ['/a', '/b', '/c', '/b']입니다. 1. 이때는 위의 정상적인 상황의 논리에 따라 작동합니다. 앞으로를 클릭한 다음 저장된 경로로 이동하여 검색할 수 없으면 앞으로 이동합니다. 내가 그것을 찾으면 돌아간다는 뜻이다. 결과는 뻔합니다. 첫 번째 C 페이지를 찾았으므로 뒤로 이동하지만 실제로 클릭하면 앞으로 이동합니다.2. 그러면 첫 번째 B 페이지 뒤에 있는 경로를 삭제해 보겠습니다. 그런 다음 저장합니다. 경로는 ['/a', '/b'],그런 다음 뒤로 버튼을 클릭하면 실제로 C 페이지로 들어갑니다. 다음 순서도를 볼 수 있습니다A 페이지-> 그리고 한 걸음 뒤로 물러서서 B 페이지에 도달했습니다
이번에는 여기를 클릭합니다. 뒤로 버튼을 누르면 C 페이지로 이동하지만 저장된 경로의 `'/c'`는 제가 삭제했기 때문에 앞으로 가는 것으로 판단됩니다. 
문자열을 넣을 수 있습니다
코드 구현:// 当没有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('UPDATE_ROUTER_DIRECTION', { routerDirection: '' })
}
})
위도 이해하기 쉽습니다. 마침내 화면을 떠난 다음 beforeEach로 이동하여 비교합니다.
손가락이 화면을 떠나는 마지막 순간과 beforeEach의 차이는 IOS의 슬라이딩 전환임에도 불구하고 337보다 작습니다
이로 인해 문제가 해결됩니다. IOS의 슬라이딩 스위칭 문제.
하지만 IOS가 오른쪽으로 슬라이드하여 전환할 때 손가락이 화면에서 나가는 순간을 모니터링할 수 없으므로(유령이 무엇인지는 모르겠습니다) IOS가 오른쪽으로 슬라이드하여 전환하며 위와 같이 판단할 수 없습니다.
이 문제에 대한 해결책을 찾지 못했습니다. IOS에서는 왼쪽으로 스와이프하여 돌아가는 스위치만 해결할 수 있습니다.
기본적으로 가장 문제가 되는 두 가지 사항은 위의 두 가지 사항입니다. 나머지는 이벤트를 모니터링하여 설정할 수 있는데 전혀 어렵지 않습니다.
이 글의 사례를 읽으신 후 방법을 익히셨으리라 믿습니다. 더 흥미로운 내용이 있으니 PHP 중국어 웹사이트의 다른 관련 기사도 주목해 주세요!
추천 도서:
JS를 사용하여 Ajax 기능 및 사용법을 캡슐화하는 방법
위 내용은 Vue 모바일 라우팅 스위칭 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!