Vue は異なる ID を持つ異なるナビゲーション バーを取得します

Vue は、完璧なデータ バインディング機能と学びやすい構文を備えた単一ページ アプリケーションを構築するための人気のあるフロントエンド フレームワークです。実際の開発では、多くの場合、ユーザー ID に基づいて異なるナビゲーション バーをロードする必要があります。この記事では、Vue で異なる ID に基づいて異なるナビゲーション バーを取得する機能を実装する方法を紹介します。

前提条件

この記事は、読者が Vue.js と webpack パッケージ化ツールの基本をすでに理解していることを前提としています。これらの内容についてよく知らない場合は、まず関連する講座を受講することをお勧めします。

要件を確認する

コードを書き始める前に、要件を明確にする必要があります。異なるユーザー ID に応じて異なるナビゲーション バーをロードします。まず、ナビゲーション バー コンポーネントを作成し、次にさまざまなユーザー ID に基づいてさまざまなコンポーネントをロードする必要があります。

ナビゲーション バー コンポーネントの作成

Navigation.vue という名前のコンポーネントを作成します。このコンポーネントで、ナビゲーション バーのスタイルとレイアウト ロジックを定義します。具体的なコードは次のとおりです。

<template>
  <div>
    <nav>
      <ul>
        <li>
          <router-link to="/">首页</router-link>
        </li>
        <li>
          <router-link to="/products">产品</router-link>
        </li>
        <li>
          <router-link to="/about">关于我们</router-link>
        </li>
        <li v-if="isAdmin">
          <router-link to="/admin">管理后台</router-link>
        </li>
        <li>
          <button @click="logout">退出</button>
        </li>
      </ul>
    </nav>
  </div>
</template>

上記のコードでは、Vue.js の v-if ディレクティブを使用してコンポーネントの表示を制御します。管理バックエンド メニューは、現在のユーザーが管理者の場合にのみナビゲーション バーに表示されます。さらに、ユーザーがクリックしてログアウトできるログアウト ボタンをナビゲーション バーに追加しました。

ユーザー ID の取得

最初に現在のユーザーの ID 情報を取得する必要があります。ここでは、本物の認証ロジックの代わりに偽のデータを使用します。

// App.vue
 
export default {
  data() {
    return {
      currentUser: {
        username: "test",
        role: "admin"
      }
    };
  },
 
  computed: {
    isAdmin() {
      return this.currentUser.role === "admin";
    }
  }
};

現在のユーザーが管理者であると仮定し、属性 isAdmin を計算することで管理者であるかどうかを判断します。管理者の場合、ナビゲーション バーに管理バックグラウンド メニューが表示されますが、それ以外の場合は表示されません。

ナビゲーション バー コンポーネントをレイアウトに追加する

最後に、ナビゲーション バー コンポーネントをページ レイアウトに追加する必要があります。この間、次のように Navigation コンポーネントを router-view コンポーネントの周囲にラップする必要があります。

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

ユーザーがアプリケーション内の任意のページにアクセスすると、Navigationコンポーネントはすべてページの上部に表示されます。

結論

この記事では、Vue のさまざまな ID に基づいてさまざまなナビゲーション バーを取得する方法を説明しました。まず、ナビゲーション コンポーネントを作成し、ユーザーの ID に基づいて表示されるメニューを計算します。最後に、ナビゲーション コンポーネントをアプリケーションのレイアウトに追加します。

実際の開発では、この記事のコードを実際のニーズに応じて調整する必要がある場合があります。ただし、同様の方法を使用してナビゲーション バーのさまざまな ID 機能を簡単に実装でき、その結果、ユーザー エクスペリエンスが向上します。

以上がVue は異なる ID を持つ異なるナビゲーション バーを取得しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。