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 の文字順序の詳細な説明 (推奨)

推薦する

mysql トリガーの作成と使用例

目次トリガーとは何かトリガーを作成するMySQL 作成構文のキーワードの説明: 1. MySQL ト...

CSS3 背景コントロールプロパティと色遷移を使用してグラデーション効果を実現します。

CSS3 背景画像関連互換性: IE9+背景クリップ 背景画像描画領域background-cli...

SCSS スタイルのコードを 50% 削減する 14 の実践的な経験

序文Sass は CSS3 言語の拡張機能です。Sass を使用すると、より良いスタイルシートをより...

Docker ベースの GitLab 環境をデプロイする方法と手順

注意:仮想マシンのメモリは2G以上が推奨され、 Alibaba Cloudのアクセラレーションイメー...

DockerコンテナでPythonを実行するディープラーニング環境を構築する方法

タスク マネージャーで仮想化を確認し、有効になっている場合は仮想化を、無効になっている場合はコンピュ...

フォーム内の無効なフォームフィールドの値を送信する方法 サンプルコード

フォーム内のフォーム フィールドが無効に設定されている場合、フォーム フィールドの値は送信されません...

Windows 10 の仮想マシンに Mac システムをインストールするグラフィック チュートリアル

1. 仮想マシンバージョン15.5.1をダウンロードする公式サイトから直接最新バージョンをダウンロー...

シンプルなデータ応答システムを実装する

目次1. デップ2. 観察者を理解する3. 監視と観察者を理解する4. トリガーの依存性5. プロセ...

Zabbix を使用して ogg プロセスを監視する (Windows プラットフォーム)

この記事では、Windows プラットフォームで ogg プログラムを監視する方法を紹介します。 (...

コードを通じてHTMLエスケープ文字を識別する方法について説明します

データ内に次のような特徴を持つ「 ' 」などの文字が含まれることがあります。 &# ...

Winにmysqlをインストールする詳細な手順

この記事では、参考までにWinにmysqlをインストールする詳細な手順を紹介します。具体的な内容は次...

MySQL 挿入時間の 8 時間の違いの問題の解決方法

MySQL挿入時の8時間の時差の問題を解決する通常、jdbc の URL にはいくつかのパラメータを...

メタ宣言注釈の手順

メタ宣言注釈の手順: 1. モバイル ページと 1 対 1 で対応するすべての PC ページを分類し...

Tencent Cloud Serverをゼロから導入する方法

初めての投稿ですので、間違いや問題点などありましたら、コメント欄で指摘していただければ、今後改善させ...

Linux システムでログを手動でスクロールする方法

ログローテーションは、Linux システムでは非常に一般的な機能です。ログローテーションは、システム...