問題の説明昨日、Vue バックエンド管理システムのルートに権限ページを動的に追加する機能に取り組んでいたときに、動的に追加されたルーティング ページでページを更新すると 404 エラーが発生するという問題が発生しました。 シナリオバックエンド管理システムの権限制御は、フロントエンドページで権限コードを定義し、コードをバックエンドの同僚に保存し、テーブルに設定することで実現されます。次に、バックエンドから返された権限コードリストがフィルタリングされ、フロントエンドページで構成されたコードメニューリストと照合されます。コードが等しいページは権限のあるページであり、router.addRoute() を通じてルートに動的に追加されます。権限のあるルートにのみアクセスでき、そうでない場合は権限がないというメッセージが表示されます。 固定ルートは、ログインページのログインなど、新しいルーターの最初に配置されます。 インターフェースリターンフロントエンドメニューの定義vuex のメソッド問題ログイン後、vuexのメソッドを呼び出して権限コードの取得を完了し、権限ルーティングページの操作を動的にフィルタリングし、router.addRoute()を介してルートに権限メニューを追加し、動的に追加されたルーティングページに入り、ページを更新して404を表示します。 原因分析ページが更新されると、ルートが再初期化されます。動的に追加されたルートは存在しなくなります。一部の固定ルート (ログイン ページなど) のみが残っているため、404 エラーが発生します。 解決VUEX ストアに保存されたデータは、ページが更新されるとクリアされます。 ナビゲーションガードにロジック判断を追加するために、コード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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Ansibleを使用してTomcatをバッチでデプロイする方法
>>: mysql order by in の文字順序の詳細な説明 (推奨)
目次トリガーとは何かトリガーを作成するMySQL 作成構文のキーワードの説明: 1. MySQL ト...
CSS3 背景画像関連互換性: IE9+背景クリップ 背景画像描画領域background-cli...
序文Sass は CSS3 言語の拡張機能です。Sass を使用すると、より良いスタイルシートをより...
注意:仮想マシンのメモリは2G以上が推奨され、 Alibaba Cloudのアクセラレーションイメー...
タスク マネージャーで仮想化を確認し、有効になっている場合は仮想化を、無効になっている場合はコンピュ...
フォーム内のフォーム フィールドが無効に設定されている場合、フォーム フィールドの値は送信されません...
1. 仮想マシンバージョン15.5.1をダウンロードする公式サイトから直接最新バージョンをダウンロー...
目次1. デップ2. 観察者を理解する3. 監視と観察者を理解する4. トリガーの依存性5. プロセ...
この記事では、Windows プラットフォームで ogg プログラムを監視する方法を紹介します。 (...
データ内に次のような特徴を持つ「 ' 」などの文字が含まれることがあります。 &# ...
この記事では、参考までにWinにmysqlをインストールする詳細な手順を紹介します。具体的な内容は次...
MySQL挿入時の8時間の時差の問題を解決する通常、jdbc の URL にはいくつかのパラメータを...
メタ宣言注釈の手順: 1. モバイル ページと 1 対 1 で対応するすべての PC ページを分類し...
初めての投稿ですので、間違いや問題点などありましたら、コメント欄で指摘していただければ、今後改善させ...
ログローテーションは、Linux システムでは非常に一般的な機能です。ログローテーションは、システム...