Vueはローカルジャンプを実装します

Vue のアプリケーションが広く普及しているため、シングルページ アプリケーションにローカル ジャンプ関数を実装する必要があることがよくあります。この種のジャンプとは、「先頭に戻る」機能の実現や、単一ページのアプリケーション内で異なるコンテンツを切り替える機能の実現など、主にページ内のリンクジャンプを指します。

いくつかの調査の結果、アンカー ポイントの使用とプログラミングという 2 つのより効果的な実装方法が見つかりました。

アンカー ポイントの使用

アンカー ポイントは、同じページ内でジャンプできる HTML 構文です。実装原理は、ページ内の指定された要素に id 属性を追加し、リンクにアンカー ポイントを追加することでページ内の要素にジャンプします。

Vue でアンカー ポイント ジャンプを実装するのも非常に簡単です。まず、ジャンプ先の要素に一意の ID を追加する必要があります。例:

<div id="example">这里是文本内容</div>

次に、対応するアンカー ポイントをページ上のリンクに追加することでジャンプできます:

<a href="#example">跳转到示例</a>

Vue でアンカーポイントジャンプを実装するコードは以下のとおりです:

this.$router.push({ path: '/', hash: '#example' })

このうち、$router は Vue-Router で提供されているルーティングオブジェクトです、path: '/' は現在のページにジャンプすることを意味し、hash: '#example' は指定された要素の ID にジャンプすることを意味します。

プログラムで実現

アンカー ポイントの使用に加えて、ローカル ジャンプをプログラムで実装することもできます。この実装方法は、一部の特殊なシナリオではより柔軟になります。

Vue-Router は、プログラムによるナビゲーションを実装するための API を多数提供します。その中で、最もよく使用される API は、$router.push メソッドと $router.replace メソッドです。どちらの方法もページ ジャンプの実装に使用できますが、実装方法が若干異なります。

$router.push このメソッドは、現在のページの URL をブラウザのルーティング履歴に追加し、新しい URL を使用して新しいページをロードすることで、ページ ジャンプを実現します。コードは次のとおりです。

this.$router.push('/path/to/destination')

$router.replace メソッドは、ブラウザ履歴に新しいレコードを追加しませんが、現在の URL を直接置き換えます。コードは次のとおりです。

this.$router.replace('/path/to/destination')

ローカル ジャンプ関数を実装する場合、まずジャンプする必要があるターゲット要素の位置情報を取得し、次に $router.push を使用します。 または $router.replace メソッドはジャンプを実装します。

実際的な例を挙げると、単一ページのアプリケーションで「トップに戻る」機能を実装できます。まず、関数を記述してターゲット要素の位置情報を取得する必要があります:

function getTargetPosition() {
  const target = document.querySelector('#target')
  if (!target) return null
  const targetRect = target.getBoundingClientRect()
  return {
    x: targetRect.left + window.pageXOffset,
    y: targetRect.top + window.pageYOffset
  }
}

次に、ページに「トップに戻る」ボタンを追加します。ユーザーがボタンをクリックすると、ローカル転送:

<button @click="backToTop">返回顶部</button>

対応する Vue メソッドは次のとおりです:

methods: {
  backToTop() {
    const position = getTargetPosition()
    if (!position) return
    this.$router.push({ path: '/', query: { position } })
  }
}

このメソッドでは、まず対象要素の位置情報を取得し、## を渡します。 #$router.push メソッド ジャンプを実装します。アンカーポイントジャンプとは異なりますので注意してください $router.pushメソッドでは、query属性を使用して対象要素の位置情報を渡します。

最後に、ターゲット ページで、

$route.query を通じて渡された位置情報を取得し、指定された位置までページをスクロールします。

mounted() {
  const { position } = this.$route.query
  if (position) {
    window.scrollTo(position.x, position.y)
  }
}

このようにして、単一ページ アプリケーションにローカル ジャンプ機能を実装できます。

概要

単一ページ アプリケーションでのローカル ジャンプの場合は、アンカー ポイントを使用するか、プログラムで実行できます。このうち、アンカー ポイント方法はよりシンプルで直感的ですが、シナリオによっては制限がある場合があります。このプログラミング方法では、ページ ジャンプの動作をより柔軟に制御できますが、対応する実装コードにはより多くの作業が必要です。

以上がVueはローカルジャンプを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。