vueスタティックルーティングの書き方

Vue は、インタラクティブで動的、スケーラブルな Web アプリケーションを構築するための柔軟なフレームワークを提供する、人気のある JavaScript フレームワークです。 Vue Router は、Vue.js の公式ルート管理プラグインであり、コンポーネントをルートにマッピングして、シングル ページ アプリケーション (SPA) 開発を可能にすることができます。

Vue Router は、ヒストリカル モードとハッシュ モードの 2 つのルーティング モードをサポートします。静的ルーティングはルーティングの一種であり、Vue Router の動的ルーティングを補足するものです。静的ルーティングを使用すると、URL パスを特定のコンポーネントにマップできます。静的ルーティングには動的パラメータは含まれません。

それでは、Vue アプリケーションで静的ルーティングを定義するにはどうすればよいでしょうか?

1. ルーティング ファイルの作成

まず、Vue プロジェクトにルーター ディレクトリを作成する必要があります。このディレクトリに、ルーティング設定を保存するための router.js ファイルを作成します。

2. Vue と Vue Router のインポート

ファイルの先頭で、Vue と Vue Router をインポートする必要があります。 Vue と Vue Router をインポートするサンプル コードは次のとおりです。

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

Vue.use(VueRouter);

3. ルート リストの作成

次に、すべての静的ルートを含むルーター インスタンスを作成する必要があります。 。通常のルート リストは次のようになります。

const routes = [
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/contact',
    component: Contact
  }
]

このコードでは、/home、/about、/contact の 3 つの静的ルートを定義します。各ルートは異なるコンポーネントを指しており、定義時にインポートする必要があります。

4. Vue Router インスタンスの作成

ルート リストを作成したら、Vue Router を通じてインスタンス化する必要があります。これは、次のコードで実行されます。

const router = new VueRouter({
  routes
});

このコードでは、ルート リストのルートをパラメーターとして指定し、VueRouter インスタンスのルーティング構成が作成されます。

5. ルート インスタンスを Vue ルート インスタンスに挿入します

次に、Vue アプリケーションが Vue ルーターに関連付けられていることを確認する必要があります。 main.js ファイルで、次のように Vue ルート インスタンスにルート インスタンスを登録します。

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

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

これで、ルートが Vue アプリケーションに正常に統合されました。アプリケーション内の静的ルートにアクセスしてみると、ルート ページのコンポーネントが正しく読み込まれていることが確認できるはずです。

概要

この記事では、Vue アプリケーションで静的ルートを定義する方法を紹介します。 Vue で静的ルートを定義すると、URL パスを特定のコンポーネントに簡単にマップできるようになり、Vue Router ルート管理プラグインを補完します。 Vue Router について詳しく知りたい場合は、公式ドキュメントを参照してください。

以上がvueスタティックルーティングの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。