Vue-Router: Vue アプリケーションでプログラムによるナビゲーションを使用するにはどうすればよいですか?

Vue-Router: Vue アプリケーションでプログラムによるナビゲーションを使用するにはどうすればよいですか?

Vue-Router は、Vue.js が公式に提供するルーティング マネージャーです。これにより、アプリケーション内のページ間のルーティング マッピング関係を管理し、単一ページ アプリケーションの効果を実現できるようになります。 Vue-Router では、ナビゲーションは宣言型ナビゲーションとプログラム型ナビゲーションの 2 種類に分類されます。

宣言型ナビゲーションは、本質的に Vue コンポーネントである コンポーネントを使用してナビゲーション リンクを定義します。 の to 属性を使用してナビゲーション リンクを指定でき、Vue-Router は to 属性をアプリケーション内のルートに自動的にマップします。

プログラムによるナビゲーションは、JavaScript コードを記述することでナビゲーションを実装します。これにより、開発者はコード内で Vue-Router によって提供される API を直接呼び出して、ページ ナビゲーションを実装できるようになります。プログラムによるナビゲーションは、Vue アプリケーションの動的なナビゲーションやアプリケーションのビジネス ロジック制御が必要な場合に、より柔軟な方法を提供します。

以下では、いくつかのコード例を使用して、Vue-Router のプログラムによるナビゲーション実装方法を示します。

1. 指定ルートへジャンプ

指定ルートへジャンプするには、Vue-Router が提供する $router.push メソッドを使用します。このメソッドは、パスまたは名前付きルートをパラメーターとして受け入れ、指定されたパスまたはルートに移動します。

<template>
  <div>
    <button @click="goHome">返回主页</button>
  </div>
</template>

<script>
export default {
  methods: {
    goHome() {
      this.$router.push('/')
    }
  }
}
</script>

上記のコードではボタンを提供しています。ボタンをクリックすると、goHome メソッドが呼び出され、ホームページへのルートに移動します。

プッシュ メソッドと同様に、Vue-Router には $router.replace メソッドも用意されており、履歴記録を残さずに現在の URL を直接置き換えることができます。これは、あるページから別のページにジャンプする必要がある場合に使用されます。

2. 前のルートにジャンプ

前のルートにジャンプする必要がある場合は、Vue-Router が提供する $router.back メソッドを使用できます。このメソッドは、アプリケーションの履歴内の前のルートに移動します。

<template>
  <div>
    <button @click="goBack">返回上一页</button>
  </div>
</template>

<script>
export default {
  methods: {
    goBack() {
      this.$router.back()
    }
  }
}
</script>

3. 次のルートにジャンプ

前のルートにジャンプするのと同様に、Vue-Router が提供する $router.forward メソッドを使用して「Go to」に移動できます。アプリケーション履歴の次のルート。

<template>
  <div>
    <button @click="goForward">前往下一页</button>
  </div>
</template>

<script>
export default {
  methods: {
    goForward() {
      this.$router.forward()
    }
  }
}
</script>

4. 名前付きルートにジャンプ

Vue-Router では、ルートの名前を設定できます。名前付きルートに移動する必要がある場合は、Vue-Router が提供する $router.push メソッドを使用して、名前をパラメーターとして渡すことができます。

<template>
  <div>
    <button @click="goToAbout">前往关于页面</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToAbout() {
      this.$router.push({ name: 'about' })
    }
  }
}
</script>

上記のコードでは、ボタンを提供します。ボタンがクリックされると、goToAbout メソッドが呼び出され、概要ページへのルートに移動します。概要ページへのパスは、名前付きルーティングを呼び出すことによって設定されます。 Vue-Routerの設定。

概要

Vue-Router では、プログラムによるナビゲーションにより、より柔軟で動的なルート管理方法が提供されます。 Vue-Router が提供する $router.push、$router.replace、$router.back、$router.forward などの API を使用してジャンプできます。同時に、ナビゲーションに名前付きルートを使用することもできます。プログラムによるナビゲーションを使用する場合は、ナビゲーション操作によってページの再レンダリングがトリガーされる可能性があることに注意し、ナビゲーション操作で予期しない動作が発生しないようにする必要があります。

以上がVue-Router: Vue アプリケーションでプログラムによるナビゲーションを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。