Vue で動的に追加されたルーティング ページの更新時に失敗する理由と解決策

Vue で動的に追加されたルーティング ページの更新時に失敗する理由と解決策

問題の説明

昨日、Vue バックエンド管理システムのルートに権限ページを動的に追加する機能に取り組んでいたときに、動的に追加されたルーティング ページでページを更新すると 404 エラーが発生するという問題が発生しました。

シナリオ

バックエンド管理システムの権限制御は、フロントエンドページで権限コードを定義し、コードをバックエンドの同僚に保存し、テーブルに設定することで実現されます。次に、バックエンドから返された権限コードリストがフィルタリングされ、フロントエンドページで構成されたコードメニューリストと照合されます。コードが等しいページは権限のあるページであり、router.addRoute() を通じてルートに動的に追加されます。権限のあるルートにのみアクセスでき、そうでない場合は権限がないというメッセージが表示されます。

固定ルートは、ログインページのログインなど、新しいルーターの最初に配置されます。

インターフェースリターン

フロントエンドメニューの定義

vuex のメソッド

問題

ログイン後、vuexのメソッドを呼び出して権限コードの取得を完了し、権限ルーティングページの操作を動的にフィルタリングし、router.addRoute()を介してルートに権限メニューを追加し、動的に追加されたルーティングページに入り、ページを更新して404を表示します。

原因分析

ページが更新されると、ルートが再初期化されます。動的に追加されたルートは存在しなくなります。一部の固定ルート (ログイン ページなど) のみが残っているため、404 エラーが発生します。

解決

VUEX ストアに保存されたデータは、ページが更新されるとクリアされます。
ルートのグローバルナビゲーション router.beforeEach で判定を行い、VUEX に格納されているリストに値があるかどうかでページがリフレッシュされるかどうかを判定します。0 でない場合は初回ログインです。ログイン後はマッチングしたルートが使用されるため問題ありません。list.length が 0 の場合はリフレッシュページなので、ルートマッチングを再実行し、動的ルートを再度追加する必要があります。

ナビゲーションガードにロジック判断を追加するために、コードroute/index.jsを実装します。

———router.js————-

const 定数ルート = [
 {
  パス: '/'、
  リダイレクト: '/login'
 },
 {
  パス: '/login',
  名前: 'ログイン',
  メタ: {
   認証: 偽
  },
  コンポーネント: () => import('@/views/login')
 },
 {
  パス: '/layout',
  名前: 'レイアウト',
  メタ: {
   認証: 有効
  },
  コンポーネント: () => import('@/views/layout/index'),
  子供たち: [
   {
    パス: '/index',
    名前: 'インデックス',
    コンポーネント: () => import('@/views/home')
   }
  ]
 },
 {
  パス: '*'、
  コンポーネント: () => import('@/views/error/404')
 }
]

Vue.use(VueRouter)
const createRouter = () =>
 新しいVueRouter({
  ルート: 定数ルート
 })
エクスポート関数resetRouter() {
 定数 newRouter = createRouter()
 router.matcher = newRouter.matcher // ルーターをリセットする
}
定数ルーター = createRouter()
 
// ページが更新された後に動的ルーティングの 404 問題を防ぐために、権限ページの動的ルーティングをリセットします。const reSetPermissionList = to => {
 新しい Promise を返します ((resolve, reject) => {
  to.path !== '/login' && store.state.permission.permissionList.length === 0 の場合 {
   店
    .dispatch('permission/getPermissionList')
    .then(() => {
     解決('permCode')
    })
    .catch(エラー => {
     解決('permCode')
    })
  } それ以外 {
   解決する()
  }
 })
}
router.beforeEach((to, from, next) => {
  
 const accessToken = localStorage.getItem('accessToken')
 if (_.isEmpty(accessToken)){//ログインしていますか? ログインページへ進みます next({
   パス: '/login',
   クエリ: {
    リダイレクト: to.fullPath
   }
  })
 } else { //ログインしたユーザーがページに入る if (to.path === '/login') {
   次へ({ パス: '/index' })
  } それ以外 {
    reSetPermissionList(to).then(データ => {
     データ === 'permCode' ? next({ パス: to.path, クエリ: to.query }): next()
    })
  }
 }
 
})

要約する

主に、グローバルナビゲーションに VUEX のデータが存在するかどうか、ページが更新されているかどうかを判断します。更新されている場合は、権限ルーティングのマッチング方法を再度実行します。

上記は、Vue の動的に追加されたルーティング ページが更新されない原因と解決策の詳細な内容です。Vue ルーティング ページの更新の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • キープアライブ使用時にVueシングルページが更新されない問題を解決
  • vue2.0 でページをリフレッシュせずに前方にリフレッシュして戻る方法を実装する方法
  • Vue/React シングルページ アプリケーションをリフレッシュなしで復元するソリューション
  • Vue が前のページに戻っても更新されない問題とその解決方法

<<:  Ansibleを使用してTomcatをバッチでデプロイする方法

>>:  mysql order by in の文字順序の詳細な説明 (推奨)

推薦する

Nginx リバース プロキシはポート 80 のリクエストを 8080 に転送します

まず、一連の概念を理解しましょう。nginx リバース プロキシとは何でしょうか?リバース プロキシ...

MySQLのインデックス選択と最適化の詳細な説明

目次インデックスモデルB+ツリーインデックスの選択インデックスの最適化インデックスの選択性カバーイン...

CentOS 7 は Hadoop 2.10 の高可用性 (HA) をビルドします

この記事では、CentOS 7 で高可用性 Hadoop 2.10 クラスターを構築する方法を紹介し...

MySQLイベント計画タスクに関する簡単な説明

1. イベントが有効になっているかどうかを確認する'%sche%' のような変数を表...

mysqlにコメント情報を追加する実装

序文最近、MySQL に関するメモをいくつか尋ねる人がいたので、ブログ記事を書かなければなりません。...

CSSは背景画像の画面適応を実現する

ログインページなどのホームページを作成する場合、大きな背景画像を配置する必要があり、さまざまな画面の...

Docker イメージのダウンロードが遅すぎる場合の解決策

Docker イメージのダウンロードが停止したり、遅すぎたりするネットでいろいろな方法を検索しました...

ミニプログラム録画機能の実装

序文ミニプログラムを開発する過程では、録音機能を実装し、録音を再生し、録音をサーバーにアップロードす...

ダッシュボードを実装するためのjQueryプラグイン

jQueryプラグインは、参考のためにダッシュボードを実装します。具体的な内容は次のとおりです。一般...

HTMLヘッダータグの使用に関する詳細な説明

HTMLはヘッドとボディの2つの部分で構成されています** ヘッド内のタグはヘッドタグです** タイ...

mysql 10進データ型変換の実装

最近、次のデータ型のデータベースに遭遇しました:decimal(14,4)発生した問題は次のとおりで...

MySQL 8.0.12 のインストールと設定方法のグラフィック チュートリアル (Windows10)

この記事は、参考のためにMySQL 8.0.12のインストールグラフィックチュートリアルを記録してい...

仮想スクロールを簡単に実装するためのVueサンプルコード

目次序文ローリング原理成し遂げるソースコード参照する序文モバイル Web ページの日常的な開発では、...

CentOS 6.6 ソースコードのコンパイルと MySQL 5.7.18 のインストールチュートリアルの詳細な説明

1. ユーザーとグループを追加する1. mysqlユーザーグループを追加する # グループ追加mys...

JavaScript で実装された 7 つのソート アルゴリズムの概要 (推奨!)

目次序文バブルソート基本アルゴリズム2 番目の書き方は、基本的なアルゴリズムに基づいて改良されていま...