vue3ルーティングでパラメータtsを記述する方法

Vue3 は、コンポーネント化と応答性に優れた、現在人気のあるフロントエンド フレームワークの 1 つです。 vue-router は、Vue によって公式に提供されているルーティング プラグインで、フロントエンド アプリケーションのページ間をジャンプしてシングル ページ アプリケーション (SPA) を実装できるようにします。

開発では、あるページから別のページにジャンプして対応するデータを表示するなど、ルート間でパラメーターを渡す必要がある場合があります。次に、誤ったパラメータの受け渡しによって引き起こされるランタイム例外を回避するために、TypeScript の型チェックと組み合わせて、Vue3 の vue-router を介してパラメータを渡す方法を紹介します。

vue-router のインストール

vue-router を使用してルート ジャンプを実装する前に、まず vue-router をインストールする必要があります:

npm install vue-router@next

ルートの定義

次に、Vue アプリケーションでルートを定義する必要があります。 Vue3 では、ルートの定義が Vue2 とは異なります。以下は簡単なサンプル コードです:

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    props: true
  },
  {
    path: '/page/:id',
    name: 'Page',
    component: Page,
    props: true
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

その中で、createRouter と createWebHistory は、ルーティング インスタンスと履歴マネージャーを作成するために Vue3 によって提供されるファクトリ メソッドです。

ルートを定義するときは、パス、ルート名、コンポーネントを指定する必要があります。さらに、props: true を設定することでパス パラメーターをコンポーネント プロパティとして渡し、コンポーネントがパラメーターを受け取りやすくすることもできます。

ルート ジャンプ

基本的なルート ジャンプのサンプル コード:

import router from '@/router';

router.push({ name: 'Page', params: { id: '1' } });

上記のコードでは、router.push メソッド Perform を使用します。ルートジャンプ。このうち、name はジャンプ ルート名、params は渡されるパラメータ オブジェクトで、その内部キーはルーティング パス内のパラメータ名に対応します。

パラメータの受信

最後に、ジャンプしたページ コンポーネントでパラメータを受信し、型チェックを実行する必要があります。

パラメータを渡す方法は 2 つあります。 1 つは props 経由で、もう 1 つは $route 経由です。これら 2 つのパラメーター受け渡しメソッドの具体的な実装をそれぞれ見てみましょう。

props を介してパラメーターを渡す

ルートを定義するとき、props# を介してルート パラメーターを渡すことができます。 ## オプション コンポーネントのプロパティとして渡されます。以下はサンプル コードです。

// 路由定义
{
  path: '/page/:id',
  name: 'Page',
  component: Page,
  props: true
}

コンポーネントでは、これらのプロパティを直接宣言し、TypeScript を通じて型チェックを実行できます。以下はサンプル コードです:

<script lang="ts">
interface Props {
  id: string;
}

export default {
  props: {
    id: {
      type: String,
      required: true
    }
  },
  setup(props: Props) {
    /* ... */
  }
};
</script>

ここでは、Vue3 の新しく導入された

setup 関数を使用して、Vue2 の data と computed## を置き換えます。 #、methods、およびその他のフック関数。 props オブジェクトを通じて、渡されたパラメータを取得し、型チェックを実行できます。 $route を介してパラメータを渡す

パラメータを渡すもう 1 つの方法は、

$route

を介することです。このようにして、$route.params オブジェクトを通じてルーティング パラメーターを取得できます。以下はサンプル コードです: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;script lang=&quot;ts&quot;&gt; import { defineComponent } from 'vue'; export default defineComponent({ setup() { const id = $route.params.id; /* ... */ } }); &lt;/script&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

$route

を使用する場合、静的メソッドを通じて RouteLocationNormalized と RouteParams## をインポートする必要があることに注意してください。 type #ルーティング関連の型を待ち、パラメータの型チェックを実行します。

import { defineComponent } from 'vue';
import { RouteLocationNormalized, RouteParams } from 'vue-router';

export default defineComponent({
  setup() {
    const route = $route as RouteLocationNormalized & { params: RouteParams };
    const id = route.params.id;
    /* ... */
  }
});

概要vue-router を使用してルーティング パラメーターを渡し、Vue3 で型チェックを実行することは、より安全で信頼性の高い方法です。 TypeScript の型チェックを通じて、不正なパラメーターの受け渡しによって引き起こされる実行時例外を回避し、コードの安定性を向上させることができます。同時に、Vue3 によって導入された

setup

関数やファクトリー メソッドなどの新機能により、開発プロセス中のルーティングの管理と処理が容易になります。

以上がvue3ルーティングでパラメータtsを記述する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。