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

まず、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 インスタンスにルーティングを?qū)毪工氡匾ⅳ辘蓼埂?

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 関數(shù)で App.vue コンポーネントをレンダリングします。

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

コンポーネントでは、 タグを使用して、ルートに対応するコンポーネントを表示できます?，F(xiàn)在の 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 內(nèi)のパスが変更され、 タグによって対応するコンポーネントが表示されます。

さらに、コンポーネント內(nèi)で $route オブジェクトを使用して、現(xiàn)在の 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 ディレクティブを使用して、現(xiàn)在の URL のパスに基づいて、対応する

タグを表示するかどうかを決定します。

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

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