Vueモバイル端末ルーティング切り替え事例分析

今回は、Vue モバイル ルーティング スイッチングの事例分析をお届けします。Vue モバイル ルーティング スイッチングの 注意事項 は何ですか? 実際のケースを見てみましょう。

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

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

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

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

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

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

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

次の例

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

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

配列を使用して表します: ['/a' , '/b' , '/c']

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

この時点では、ページ B が存在するかどうかを判断するだけです。存在することは、私が戻るボタンをクリックしたことを証明します。

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

これならできます。

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

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

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

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

次の状況と同じです

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

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

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

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

見つからない場合は、保存されたパスに移動します。証拠が見つかったら戻ります。

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

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

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

。

この時、ここで戻るボタンをクリックするとページ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(&#39;UPDATE_ROUTER_DIRECTION&#39;, { routerDirection: &#39;&#39; })
 }
})

上記もわかりやすいです。つまり、指が最終的に画面から離れる瞬間を取得し、次に指が画面から離れる最後の瞬間と、直前のそれぞれの瞬間との違いを比較します。指が画面から離れると、前に私たち自身のトランジションが発生します。IOS のスライド切り替えであっても、それぞれが 337 未満です

これにより、IOS のスライド切り替えの問題が解決されます。

しかし、IOSは右にスライドして切り替えた場合、指が画面から離れる瞬間を監視できないので（ゴーストが何かはわかりません）、IOSが右にスライドして切り替えた場合は上記のように判断できません。

これについても今のところ解決策は見つかっていませんが、IOSで左にスワイプして戻るスイッチを解決することしかできません。

基本的に、最も面倒な点は上記の 2 点です。残りは

イベントを監視することで設定できます。これはまったく難しいことではありません

オンライン DEMO デモ

この記事の事例を読んだことがあるかと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

jQuery クラス名セレクター (.class) の使用方法の詳細な説明

vue の動的バインド コンポーネントのサブ親コンポーネント マルチフォーム検証の実装手順

以上がVueモバイル端末ルーティング切り替え事例分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。