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

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

WBOY

リリース： 2023-12-18 16:00:29

オリジナル

570 人が閲覧しました

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 のプログラムによるナビゲーション実装方法を示します。

指定ルートへジャンプ

指定ルートへジャンプするには、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 を直接置き換えることができます。これは、あるページから別のページにジャンプする必要がある場合に使用されます。

前のルートにジャンプ

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

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

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

ログイン後にコピー

次のルートにジャンプ

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

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

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

ログイン後にコピー

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

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 サイトの他の関連記事を参照してください。