Vue で 2 つのルート間をジャンプする方法 (メソッドの簡単な分析)

Vue は非常に人気のある JavaScript フレームワークで、コンポーネント化された Web アプリケーションを構築することで開発効率を向上させることができます。 Vue.js のルーティング システムを使用すると、異なるページ間を移動できます。この記事では、2 つの Vue ルート間を移動する方法を紹介します。

Vue のルーティングは、vue-router プラグインを通じて完了します。 vue-router プラグインは、アプリケーションのルートを定義および管理できるルーター インスタンスを提供します。 vue-router を使用するには、Vue アプリケーションに vue-router を導入する必要があります。

ルートの定義

まず、Vue アプリケーションでルートを定義します。ルートを定義する方法は、Vue Router のルート マッピングを定義することです。 URL パスと Vue コンポーネント間のマッピングを指定します。ルート マッピングは、vue-router インスタンスの Routes 属性を通じて定義できます。

たとえば、「Home」という名前の Vue コンポーネントを作成します:

<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

次に、ルーティング マップでルートを定義し、ホーム ページのパスを Home コンポーネントに指定できます:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home }
]

const router = new VueRouter({
  routes
})

new Vue({
  router
}).$mount('#app')

上記のコードでは、まず import ステートメントを使用して、Vue および Vue Router ライブラリとホーム コンポーネントをインポートします。次に、Vue.use() 呼び出しを通じて Vue ルーターを Vue アプリケーションに登録します。次に、ルーティング マップ ルートを定義します。これには、URL パスを定義するパス項目と、対応するパスの Vue コンポーネントを指定するコンポーネント項目が含まれます。最後に、ルーター インスタンスを作成し、それを Vue インスタンスに渡します。

ルート ジャンプの使用

ルート マップを作成してルートを定義したので、次のステップはルート ジャンプを実行する方法です。 Vue Router は、宣言型ナビゲーションとプログラム型ナビゲーションという 2 種類のジャンプを提供します。

宣言型ナビゲーション

宣言型ナビゲーションとは、Vue コンポーネントの コンポーネントを使用して別のルートにジャンプすることを指します。たとえば、Home コンポーネントの タグを使用して About コンポーネントにジャンプします:

<template>
  <div>
    <h1>Home Page</h1>
    <router-link to="/about">About Page</router-link>
  </div>
</template>

ここでは、to 属性を使用してジャンプ先のルートへのパスを指定します。 Vue は、to 属性を別のルートへのフルパスとして解決します。

プログラムによるナビゲーション

プログラムによるナビゲーションは、Vue Router インスタンスの $router メソッドを使用してルート間をジャンプします。たとえば、Home コンポーネントでは、$router.push メソッドを使用して About コンポーネントにジャンプできます。

<template>
  <div>
    <h1>Home Page</h1>
    <button @click="gotoAbout">About Page</button>
  </div>
</template>

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

ここでは、gotoAbout メソッドを定義します。$router.push メソッドは次の目的で使用されます。ルートをジャンプ 目的のルートに移動します。

まとめ

上記 2 つの方法により、2 つの Vue ルート間のジャンプを実現できます。宣言的ナビゲーションとプログラムによるナビゲーションはどちらも、Vue Router で一般的に使用されるルーティング ジャンプ方法です。実際の開発では、特定のシナリオに応じてさまざまな方法を選択できます。

以上がVue で 2 つのルート間をジャンプする方法 (メソッドの簡単な分析)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。