Vue Element フロントエンドアプリケーション開発の動的メニューとルーティングの関連付け処理

Vue Element フロントエンドアプリケーション開発の動的メニューとルーティングの関連付け処理

概要

私が開発した多くのシステム(Winform ハイブリッド フレームワーク、Bootstrap 開発フレームワーク、その他の一連の製品を含む)では、メニューを動的に構成し、対応するロールのメニュー権限とページ権限を管理して、システムによるユーザー権限の制御を実現する傾向があります。メニューには通常、名前、アイコン、順序、URL 接続、その他の関連情報が含まれます。VUE + Element フロントエンド アプリケーションの場合も、原則は同様です。このエッセイでは、サーバー上の動的メニュー構成とローカル ルーティングの関連処理を組み合わせて、動的なメニューのメンテナンスと表示処理を実現する方法を紹介します。

1. メニューとルーティング処理

Vue フロントエンドにもルーティングの概念を導入する必要があるため、ルーティングはフロントエンドがアクセスできる対応するパス コレクションです。ルーティングは、通常のメニューにはない多くの複雑な情報を定義しますが、これらを自由に変更できないことが多いため、ローカルに構成されたルート リストに基づくアプローチを採用し、メニューにはバックエンド構成方法を使用します。フロントエンドは、インターフェイスを通じてメニュー リストを動的に取得します。メニュー名とルート名の対応を通じて、メニュー コレクションを参照として使用し、すべてのローカル静的ルートのリストをフィルター処理してから、ユーザーがアクセスできるルート リストを取得し、動的ルートをフロントエンドに設定することで、ユーザーの役割/権限に応じてインターフェイスを実現し、ユーザーのメニュー インターフェイスとアクセス可能なルート コレクションを変更します。

メニュールーティングのおおよその操作手順は以下のとおりです。

フロントエンド インターフェイスの動的メニュー、ローカル ルート、メニュー ナビゲーション、アクセス可能なルートのいくつかの概念を以下に示します。

フロントエンドインターフェース処理では、Elementインターフェースコンポーネントを通じて動的なメニュー情報を表示し、メニューとルーティングの関係を組み合わせて、対応するビューへのメニュージャンプのプロセスを実現します。

2. メニューとルートリスト

前回の紹介に従って、サーバーから返される動的なメニュー情報をいくつか定義しました。このメニュー情報は、次のインターフェイスに示すように、JSON オブジェクトのコレクションです。

[
  {
    id: '1',
    pid: '-1',
    テキスト: 'ホームページ'、
    アイコン: 'ダッシュボード'、
    名前: 'ダッシュボード'
  },
  {
    id: '2',
    pid: '-1',
    テキスト: '製品リスト'、
    アイコン: 'テーブル',
    名前: '製品'
  },
  {
    id: '3',
    pid: '-1',
    テキスト: '第 1 レベル メニュー'、
    アイコン: '例',
    子供たち: [
      {
        id: '3-1',
        pid: '3'、
        テキスト: 'セカンダリメニュー1'、
        名前: 'アイコン',
        アイコン: '例'
      },
      {
        id: '3-2',
        pid: '3'、
        テキスト: 'セカンダリメニュー2'、
        アイコン: '木'、
        子供たち: [
          {
            id: '3-2-1',
            pid: '3-2'、
            テキスト: 'レベル 3 メニュー 1'、
            名前: 'フォーム',
            アイコン: 'フォーム'
          },
          {
            id: '3-2-2',
            pid: '3-2'、
            テキスト: 'レベル 3 メニュー 2'、
            名前: 'menu1-1',
            アイコン: 'フォーム'
          },
          {
            id: '3-2-3',
            pid: '3-2'、
            テキスト: 'レベル 3 メニュー 3'、
            名前: 'メニュー1-2',
            アイコン: 'フォーム'
          },
          {
            id: '3-2-4',
            pid: '3-2'、
            テキスト: 'レベル 3 メニュー 4'、
            名前: 'メニュー1-3',
            アイコン: 'フォーム'
          }
        ]
      }
    ]
  },
  {
    id: '99',
    pid: '-1',
    テキスト: '会社のウェブサイト'、
    アイコン: 'テーブル',
    名前: '外部リンク'
  }
]

メニューの JSON は、ロールに基づいて動的に取得されます。異なるロールは異なるメニュー セットに対応します。メニューは、無限の数の表示レベルを定義できるマルチレベル ツリー リストです。JSON 形式のビューを以下に示します。

Vue フロントエンドでは、ルーティング ページのレイアウトなどの情報を含む、フロントエンド ページのすべてのルートを初期化して定義する必要があります。

フロントエンドに対応するすべてのルーティング情報を、以下に示すようにJSファイルで定義できます。

// このシステムのすべてのルートを定義します。特定のルートはメニューデータによってフィルタリングされます。export const asyncRoutes = {
  'ダッシュボード': {
    パス: '/dashboard',
    コンポーネント: レイアウト、
    子供たち: [{
      パス: 'ダッシュボード',
      名前: 'ダッシュボード'、
      コンポーネント: () => import('@/views/dashboard/index')
    }]
  },
  '製品': {
    パス: '/product',
    コンポーネント: レイアウト、
    子供たち: [{
      パス: '/product',
      名前: '製品',
      コンポーネント: () => import('@/views/Product/index')
    }]
  },

  .............................. // 'icon' 部分を省略: {
    パス: '/icon',
    コンポーネント: レイアウト、
    子供たち: [{
      パス: '/icon',
      名前: 'アイコン',
      コンポーネント: () => import('@/views/icons/index')
    }]
  },

  '外部リンク': {
    パス: 'http://www.iqidi.com',
    名前: '外部リンク'
  }
}

メニュー表示にはネストされた関係を定義する必要があるため、ここでのルートはネストする必要はありません。

さらに、バックエンドの動的メニューを要求するためにログインする前にシステムを正常に実行する必要があるため、ログイン インターフェイス、リダイレクト ページ、ホームページ リンクなどの基本的なルーティング情報を事前に設定する必要があります。したがって、この情報を個別に管理するために 2 つのルーティング オブジェクトを分離できます。

ルートの管理には、デフォルトでルートを作成し、ルートをリセットし、新しいルートを動的に設定する必要があります。これらの操作を処理するために、いくつかの関数をカプセル化します。

const createRouter = () => 新しいルーター({
  // モード: 'history'、// サービスサポートが必要
  スクロール動作: () => ({ y: 0 }),
  ルート: 定数ルート
})

定数ルーター = createRouter()

// ルートエクスポート関数をリセットする resetRouter() {
  定数 newRouter = createRouter()
  router.matcher = newRouter.matcher // ルーターをリセットする
}

ユーザーがログイン インターフェイスを介して処理された後、対応するアクションを通じて動的ルーティング情報が取得されます (ここでは、最初に動的メニューが取得され、次に動的ルーティング情報であるローカル ルーティングがフィルタリングされることに注意してください)。動的ルーティングを取得した後、次のコードに示すように、フロント エンドからアクセスできるルーティング コレクションを設定できます。

これらの新しいルートにより、フロントエンド システムのメニューは正常に機能します。そうでない場合、インターフェイスにメニューが表示されても、ルートが利用できないため、特定のビュー ページにアクセスできず、404 ページにジャンプします。

3. ログインプロセスの処理

前のセクションでは、ルーティング プロセスについて簡単に説明しました。実際には、ログイン インターフェイスからのルーティング情報について説明する必要があります。

ログインインターフェースを例にとると、ユーザーがログインした後、まずユーザーのアカウントとパスワードを検証する必要があります。成功した場合は、ユーザーに対応する動的メニューセットを要求し続け、ルーティングを通じて対応するページまたはホームページに切り替えます。

Store/Modules/user.jsモジュールでは、対応するログイン処理アクションは次のように定義されています。

ここでは、ユーザー ログインの検証とトークンの処理のプロセスは無視し、動的メニュー要求とルートの設定のプロセスに焦点を当てます。

ルート到着を傍受する必要がある前のプロセスでは、以下に示すように、対応するルート情報要求ロジックを定義します。

router.beforeEach(async(to, from, next) => {

メニュー ルーティングを処理する対応するモジュールでは、次の State の定義に示すように、これらの重要な情報を伝達する状態を定義します。

定数状態 = {
  メニュー項目: [],
  ルート: [],
  ルートを追加: [],
  非同期ルート: 非同期ルート
}
// ルートとメニューの変更を定義します
const 変異 = {
  SET_ROUTES: (状態、ルート) => {
    // var list = convertRoute(routes)
    routes.push({ path: '*', redirect: '/404', hidden: true }) // これはデフォルトのエラールートです state.addRoutes =routes
    state.routes = [].concat(routes) // 定数Routes.concat(routes)
  },
  SET_MENUS: (状態、メニュー) => {
    state.menuItems = メニュー
  }
}
// 動的ルートを生成するためのアクション処理を定義します const actions = {
  ルートを生成する({コミット}, ロール) {
    新しいPromiseを返します(resolve => {
      getMenus().then(res => {
        const menus = res.data || [] // インターフェースを通じてメニュー情報を一様に取得する constroutes = []

        menus.forEach(item => {
          filterRoutes(ルート、項目)
        })
        console.log(routes) // ルートを印刷 commit('SET_ROUTES',routes)
        commit('SET_MENUS', メニュー)
        解決(ルート)
      });
    })
  }
}

最後に、対応する JS 定義モジュール クラス情報を返します。

エクスポートデフォルト{
  名前空間: true、
  州、
  突然変異、
  アクション
}

フロントエンドインターフェース処理では、Elementインターフェースコンポーネントを通じて動的なメニュー情報を表示し、メニューとルーティングの関係を組み合わせて、対応するビューへのメニュージャンプのプロセスを実現します。

インターフェースによって生成される動的なメニュー効果を見てみましょう。

メニューの動的表示と動的ルーティングが連携して動作するため、フロントエンドに動的メニューを表示し、メニューセットに応じてアクセス可能なルートを更新することができます。この 2 つを組み合わせることで、対応するビュー ページをスムーズに開くことができます。

もう一度確認してみましょう。メニュールーティングのおおよその操作手順は次のとおりです。

以上が、Vue Element フロントエンドアプリケーション開発における動的メニューとルーティングの関連付け処理の詳細な内容です。Vue Element の動的メニューとルーティングの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • バックエンドデータを取得するためのVue Elementフロントエンドアプリケーション開発
  • Vue Element フロントエンドアプリケーション開発: Vuex での API ストアビューの使用
  • Vue Element フロントエンドアプリケーション開発開発環境の準備
  • Vue3+elementui plusでプロジェクトを作成する方法
  • Vue要素は行データを結合するテーブルを実現します
  • Vue プロジェクトに bootstrap、elementUI、echarts を導入する方法
  • 展開と折りたたみ機能を実装する vue element-ul のサンプルコード
  • Vueは要素を使用して、追加、削除、変更、パッケージ化の手順を実装します。
  • vue+Element-uiはログイン登録フォームを実装します
  • Vue Element フロントエンドアプリケーション開発メニューリソース管理

<<:  MySQL学習エンジンの詳細な説明、説明、権限

>>:  Linux yum パッケージ管理方法

推薦する

Vueのカスタムディレクティブの詳細なガイド

目次1. カスタム指示とは何ですか? 2. 指示をカスタマイズする方法フック機能3. 応用シナリオ入...

html2canvasで画像が正常にキャプチャできない時の解決方法

質問まず、私が遭遇した問題についてお話しします。まず、そういった需要があるわけです。フロントエンドは...

Vueプロジェクトでlessを使用するためのヒント

目次序文1. スタイルの浸透1. パターン浸透とは何ですか? 2. 使い方は? 2. ミキシング1....

企業サイトとコラム辞典 中国語と英語の比較 中国語と英語のバイリンガル企業サイトを作る仲間は

名前キャラクター名前キャラクター情報ニューステクノロジー技術スキンケアスキンケア補う補う香水香水化粧...

TomcatはNginxリバースプロキシのクライアントドメイン名を取得します

質問Nginx リバース プロキシの後、Tomcat アプリケーションは、クライアント ブラウザーの...

フォーム内のどの隠し属性をフォームとともに送信できるか

フォーム内の visibility=hidden および display=none のフォーム要素は...

CSSフロートの特性についての簡単な説明

この記事では、CSS フロートの特徴を紹介します。皆さんと共有し、自分用のメモとして残したいと思いま...

Vueでフォーム検証を実装する方法

1. インストールと使用まず、Vue プロジェクトにインストールします。 npm インストール --...

MySQL 起動時に「サーバーは PID ファイルを更新せずに終了しました」というエラーが報告される理由の詳細な分析

多くの人が MySQL の起動時にこのエラーに遭遇しています。まず、このエラーの前提は、サービス ス...

プレーンな JS オブジェクトの代わりに Map を使用する場合

目次1. マップは任意のタイプのキーを受け入れます2. マップにはキー名に関する制限はありません3....

OpenSSL を使用した Kubernetes 証明書の生成の概要

Kubernetes は、基本認証、トークン認証、CA 認証の 3 種類の認証をサポートしています。...

Day.js をベースにした JavaScript での日付処理のよりエレガントな方法

目次day.js を使用する理由モーメントデイ.js day.js がなければどうなるでしょうか? ...

JS 内の Json 文字列 + Cookie + ローカルストレージ

目次1.Json文字列1.1Json構文1.2 例2. クッキー2.1 使い方は? 3. ローカルス...

MySQL の複数テーブル関連付け 1 対多クエリを使用して最新のデータを取得する方法の例

この記事では、MySQL で複数のテーブルを使用して 1 対多のクエリを使用して最新のデータを取得す...

HTML と JavaScript を使用してローカル メディア (ビデオとオーディオ) ファイルを再生する方法

まず、セキュリティ上の理由から、JavaScript はローカル リソース ファイルに直接アクセスで...