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

WBOY

リリース： 2023-07-21 15:39:15

オリジナル

2966 人が閲覧しました

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 コンポーネントをレンダリングします。

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

コンポーネントでは、タグを使用して、ルートに対応するコンポーネントを表示できます。現在の 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>

ログイン後にコピー

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

さらに、コンポーネント内で $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 のパスに基づいて、対応する