vueモバイルルーティングスイッチングの使い方

今回は、vue mobile ルーティング切り替えの使い方と、vue mobile ルーティング切り替えを使用する際の注意事項を紹介します。以下は実際のケースです。見てみましょう。

その中で最も重要なのは、次の 2 つの問題です:

ブラウザのナビゲーション バーの切り替え

スライドして IOS をオンにすると、2 つのページ遷移アニメーションが表示され、1 つは単独でスライドすると切り替わり、その後設定がトリガーされます。トランジションアニメーション。

上記の 2 つの質問を除き、残りの操作はページ内で設定でき、基本的に制御可能です。主に上記2つの問題を解決します。

実際に書かれた効果を確認できます: オンラインデモ

1. ブラウザのナビゲーションバーを切り替える

過去の記録を記録して、進むか戻るかを比較して判断します

次の例

A page-> ; B ページ -> C ページ

ページ A からページ B、そしてページ C に移動すると、3 つの履歴レコードが存在します

配列を使用して次のように表します: ['/a', '/b' , '/ c']

その後、ブラウザのナビゲーションバーの戻るボタンをクリックすると、ページBに戻ります。

この時点では、ページBが存在するかどうかを判断するだけで済みます。戻るボタン。

その後、戻ったらすぐにブラウザの進むボタンをクリックできます。現時点で前進しているかどうかをどのように判断するのでしょうか？

これならできます。

ページ B に戻っても、履歴レコードには 3 つのパス ['/a'、'/b'、'/c'] が保存されていますよね

ページ B の背後にあるパスは削除できるので、今すぐそれは [ '/a', '/b'] です。
ページ A に戻る場合、保存するパスは ['/a'] です。

進むボタンをクリックしている限り、次のページに進みましょう保存されたパスを探してくださいね？ パスが見つからないので、前方判定は完了です。

上記は通常の状況です。
しかし、いくつかのページを繰り返し入力するとどうなるでしょうか。

次の状況と同じです

A ページ-> 次に、一歩戻ってページ B に到達しました

この時点で、最初の B ページの後ろのパスを削除するべきか、それとも B ページの後ろのパスを削除すべきかという疑問が生じます。 2 番目の B ページ

まず 2 番目の B を削除してみましょう。ページのパス、次に保存するパスも次のとおりです: ['/a', '/b', '/c', '/b']。

1. この時点では、上記の通常の状況のロジックに従って動作します。

見つからない場合は、保存されたパスに移動して検索します。それを見つけたら、それは戻ることを意味します。

結果は明らかです。最初の C ページが見つかったので、戻りますが、実際には、それをクリックすると進みます。

2. 次に、最初の B ページの背後にあるパスを削除してみます。パスは: ['/a', '/b'],

そして戻るボタンをクリックすると、実際に次のフローチャートが表示されます

。今回はここをクリックします。戻るボタンを押すとページCに移動しますが、保存されたパスの`'/c'`を削除しているため、順方向と判断されます。

1. 重複するページ パスを除外したほうが良いと思いませんか? 実際、同じことです

5 つのページ パスがあり、2 つの重複を除外すると、ページ パスは 3 つだけになります

4番目のパスに後退すると、次の2ページが前進としてカウントされますか？

したがって、現在の観点から見ると、最良の方法は、各ページを記録し、各ページを異なるものにすることです

その後、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()
 }
})

上記のコードを使用すると、APP_KEY のランダムな文字列を URL に追加できるため、保存するパスに同じページがあったとしても、実際には異なるものになります。ロジックは正常に実行できます

上記は基本的にブラウザのナビゲーションバーの問題を解決します

2. IOSでのスライド切り替え

IOSのWebページでは、左右にスライドして切り替えることができます。トランジションアニメーションを作成しません。

この時問題が発生します。

まだABCページです

A -> B -> C

Cページまで行って、左にスライドするとBページに入りますが、このままです。 beforeEach フック関数に入るまでの時間、上記のロジックが実行されます。

これにより、遷移アニメーションがトリガーされます。 2 つの切り替えが実行されていることがわかります。

そこで、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で左にスワイプして戻るスイッチを解決することしかできません。

基本的に、最も面倒な点は上記の 2 点です。残りは イベント を監視することで設定できます。これはまったく難しいことではありません

この記事の事例を読んだ後は、方法をマスターしたと思います。さらにエキサイティングなコンテンツがございますので、php 中国語 Web サイトの他の関連記事にもご注目ください。

推奨読書:

js を使用して ajax 関数とその使用法をカプセル化する方法

JS の一般的な数学関数とは何ですか?

以上がvueモバイルルーティングスイッチングの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。