Vue はどのようにルート名を取得し、さまざまなデータをロードするのでしょうか?

フロントエンド開発技術の進歩に伴い、実際の開発現場で広く利用されるフロントエンドフレームワークやライブラリが増えていますが、その中でもvue.jsは人気のフロントエンドフレームワークの一つとして注目されています。多くの Web アプリケーション開発者が最初に選択するフレームワークの 1 つ。 vueで、ルートジャンプ後に取得したルート名に応じて異なるデータをロードするにはどうすればよいですか?この記事では実装方法を説明します。

1. vue-router

vue の公式ドキュメントでは、ルーティング マネージャー ライブラリとして vue-router が紹介されており、アプリケーションで複雑なページジャンプやステータス管理を行う必要がある場合に使用します。 vue-router はより良いソリューションを提供してくれます。 vue-router は、非同期ロード、ルーティングパラメータ、ナビゲーションフック、ネストされたルーティングなどの強力な機能を備えており、Vue アプリケーションの構築にも便利です。

2. ルート ジャンプとパラメータの受け渡し

vue-router では、通常、ルート ジャンプに router-link メソッドまたは $router.push() メソッドを使用します。これら 2 つのメソッドの本質はルーティングです。ジャンプは URL アドレスを変更することで実現されます。ジャンプのルーティング時にパラメータを渡すのも非常に簡単で、ジャンプ リンクにクエリ パラメータまたはパラメータ パラメータを追加するだけです。

たとえば、次のルーティング設定があります:

const routes = [
  { path: '/home', component: Home },
  { path: '/detail', component: Detail },
  { path: '*', component: NotFound }
]

同時に、詳細ルートにジャンプするときに id パラメーターを渡す必要があります。これは次のように実装できます。

// 通过 $router.push 方法跳转
this.$router.push({ path: '/detail', query: { id: 123 } })
// 或者通过 router-link 组件生成跳转链接
<router-link :to="{ path: &#39;/detail&#39;, query: { id: 123 } }">Detail</router-link>

In 詳細コンポーネントのルートによって渡されるパラメータを取得するにはどうすればよいですか?これを行うことができます:

this.$route.query.id

ここで、params パラメータの場合、使用方法が少し異なることに注意してください。リンクをジャンプするときに params パラメーターを使用する必要があることに加えて、ルートを構成するときに動的パラメーターを含めるようにパスも変更する必要があります。例は次のとおりです:

const routes = [
  { path: '/home', component: Home },
  { path: '/detail/:id', component: Detail },
  { path: '*', component: NotFound }
]

リンクをジャンプするときは、 params オブジェクトを次のように変更します 含まれるパラメータ名は、ルーティング設定で宣言されたパラメータ名と 1 対 1 に対応します。例は次のとおりです。詳細コンポーネントでは、$route.params.id を使用するだけで済みます。

3. データの動的レンダリング

実際のアプリケーションでは、ルート名に基づいてさまざまなデータを動的にロードする必要がある場合があります。通常、ルート名に基づいてデータを取得し、コンポーネントの作成またはマウントされたフック関数でそれをレンダリングできます。例:

// 通过 $router.push 方法跳转
this.$router.push({ path: '/detail/123' })
// 或者通过 router-link 组件生成跳转链接
<router-link :to="{ path: &#39;/detail/123&#39; }">Detail</router-link>

上記の例では、$route.name に基づいて現在のルート名を決定し、対応するリクエストを送信してデータをロードし、コンポーネントのデータ属性に保存します。ページ上でデータ処理を実行します。

4. まとめ

この記事では、vue アプリケーションで現在のルート名を取得し、その名前に基づいてさまざまなデータを読み込む方法を主に紹介します。 vue-router が提供するルート ジャンプ関数とパラメーター受け渡し関数を使用して、ロードするデータとルート名をマッピングし、コンポーネントの作成またはマウントされたフック関数でルート名に従って対応するデータをロードできます。この実装方法は簡単で便利であり、開発効率も向上します。

以上がVue はどのようにルート名を取得し、さまざまなデータをロードするのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。