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