Vue と Vue-Router を使用して動的ルートを作成するにはどうすればよいですか?

Vue と Vue-Router を使用して動的ルーティングを作成するにはどうすればよいですか?

最新の Web アプリケーションでは、動的ルーティングは非常に一般的で重要な機能の 1 つです。 Vue と Vue-Router は、動的ルーティングを簡単に作成できる 2 つの人気のあるフロントエンド フレームワークです。この記事では、Vue と Vue-Router を使用して動的ルーティングを実装する方法と、いくつかの具体的なコード例を紹介します。

まず、Vue と Vue-Router をインストールする必要があります。ターミナルで次のコマンドを実行します。

npm install vue vue-router

インストールが完了したら、Vue アプリケーションの作成を開始できます。

新しい Vue プロジェクトを作成し、プロジェクト フォルダーでターミナルを開きます。

次のコマンドを実行して Vue インスタンスを作成します:

vue create dynamic-router

作成が完了したら、プロジェクト フォルダーに入り、Vue-Router をインストールします:

cd dynamic-router
npm install vue-router

これで、次のことが可能になります。動的ルーティングの作成を開始します。

まず、src フォルダーの下に router フォルダーを作成し、そのフォルダーの下に index.js ファイルを作成する必要があります。

index.js ファイルを開いて次のコードを追加します。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  },
  {
    path: '/user/:id',
    name: 'User',
    component: () => import('../views/User.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

上記のコードでは、routes 配列を定義します。私たちの動的ルーティング。通常のルーティング パスに加えて、動的ルーティング パス /user/:id も定義していることがわかります。
ここでの id パラメータには、指定する任意のユーザー ID を指定できます。

動的ルーティング コンポーネントでは、Vue コンポーネントの <template></template> タグで $route.params を使用して、動的ルーティング パラメーターにアクセスする必要があります。たとえば、User.vue コンポーネントでは、$route.params.id を使用してユーザー ID を取得できます。

次に、src フォルダーの下に views フォルダーを作成し、Home.vue、About.vue を作成する必要があります。 および User.vue コンポーネント。

Home.vue コンポーネントを入力して、次のコードを編集します:

<template>
  <div>
    <h1 id="Home">Home</h1>
  </div>
</template>

About.vue コンポーネントを入力して、次のコードを編集します:

<template>
  <div>
    <h1 id="About">About</h1>
  </div>
</template>

User.vue コンポーネントを入力し、次のコードを編集します。

<template>
  <div>
    <h1 id="User-Profile">User Profile</h1>
    <h2 id="User-ID-route-params-id">User ID: {{ $route.params.id }}</h2>
  </div>
</template>

ユーザーが /user/:id パスにアクセスすると、 User.vue コンポーネントがレンダリングされ、ユーザーの ID が表示されます。

最後に、src フォルダー内の main.js ファイルにルートを導入して使用する必要があります。

main.js ファイルを開いて、次のコードを編集します。

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

これで、Vue と Vue-Router の構成が完了し、アプリケーションを開始できるようになりました。

ターミナルで次のコマンドを実行します:

npm run serve

次に、ブラウザ ウィンドウを開いて、http://localhost:8080 にアクセスします。

ホームページが表示され、ナビゲーション バーの「バージョン情報」リンクをクリックすると、「バージョン情報」ページにリダイレクトされます。さらに、ブラウザのアドレス バーに http://localhost:8080/user/123 と入力すると、「ユーザー プロファイル」と「ユーザー ID: 123」を含むページが表示されます。

これは、Vue と Vue-Router を使用して動的ルーティングを作成する方法の簡単な例です。この記事がお役に立てば幸いです!

以上がVue と Vue-Router を使用して動的ルートを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。