Vue でルーティングを使用してページ要素を動的に表示および非表示にする方法は?

Vue は、ユーザー インターフェイスを構築するエレガントな方法を提供する人気のあるフロントエンド フレームワークです。 Vue ルーティングは Vue フレームワークの重要な機能であり、単一ページ アプリケーションで URL を変更することでページ間をジャンプしたり移動したりできるようになります。この基本機能に加えて、Vue ルーティングを使用してページ要素を動的に表示および非表示にすることもできます。この記事では、Vue ルーティングを使用してこの機能を実現する方法を紹介します。

まず、Vue ルーティングをインストールする必要があります。 npm コマンドを使用してインストールできます:

npm install vue-router

インストールが完了したら、Vue プロジェクトのエントリ ファイル (通常は main.js) に Vue ルーティングと関連コンポーネントをインポートできます:

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

Vue.use(VueRouter);

Connect 次に、ルートと対応するコンポーネントを定義する必要があります。 Vue プロジェクトのルート ディレクトリに新しいルーター フォルダーを作成し、そのフォルダーの下にindex.js ファイルを作成します。 Index.js ファイルでルートと対応するコンポーネントを定義します。例は次のとおりです:

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

Vue.use(VueRouter);

const routes = [
  {
    path: '/home',
    component: () => import('@/components/Home.vue'),
  },
  {
    path: '/about',
    component: () => import('@/components/About.vue'),
  },
  {
    path: '/contact',
    component: () => import('@/components/Contact.vue'),
  },
];

const router = new VueRouter({
  routes,
  mode: 'history',
});

export default router;

上記のコード例では、3 つのコンポーネントに対応する /home、/about、/contact の 3 つのルートを定義しました。それぞれ、Home.vue、About.vue、Contact.vue。次に、Vue インスタンスにルーティングを導入する必要があります。

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

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

上記のコードでは、ルーター インスタンスを Vue インスタンスに追加し、render 関数で App.vue コンポーネントをレンダリングします。

これでルーティングの設定は完了です。次に、コンポーネント内のルーティングを使用して、ページ要素を動的に表示および非表示にします。

コンポーネントでは、975b587bf85a482ea10b0a28848e78a4 タグを使用して、ルートに対応するコンポーネントを表示できます。現在の URL のパスに基づいて、どのコンポーネントを表示するかを決定します。例は次のとおりです:

<template>
  <div>
    <h1>My App</h1>

    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/contact">Contact</router-link>

    <router-view></router-view>
  </div>
</template>

上記のコードでは、b988a8fd72e5e0e42afffd18f951b277 タグを使用してナビゲーション リンクを作成し、各リンクはルートに対応します。リンクをクリックすると、URL 内のパスが変更され、975b587bf85a482ea10b0a28848e78a4 タグによって対応するコンポーネントが表示されます。

さらに、コンポーネント内で $route オブジェクトを使用して、現在の URL のパスに基づいてコンポーネントの表示と非表示を制御することもできます。例は次のとおりです:

<template>
  <div>
    <h1 v-if="$route.path === '/home'">Home</h1>
    <h1 v-if="$route.path === '/about'">About</h1>
    <h1 v-if="$route.path === '/contact'">Contact</h1>
  </div>
</template>

上記のコードでは、v-if ディレクティブを使用して、現在の URL のパスに基づいて、対応する 4a249f0d628e2318394fd9b75b4636b1 タグを表示するかどうかを決定します。

上記のサンプル コードを通じて、Vue ルーティングを使用してページ要素を動的に表示および非表示にする方法を確認できます。 URL のパスを制御することで、異なるページ間をジャンプして移動したり、現在の URL のパスに基づいてコンポーネントの表示と非表示を制御したりできます。これにより、柔軟なフロントエンド インターフェイスを開発する際に非常に便利になります。

以上がVue でルーティングを使用してページ要素を動的に表示および非表示にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。