問題の説明昨日、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 の文字順序の詳細な説明 (推奨)
まず、一連の概念を理解しましょう。nginx リバース プロキシとは何でしょうか?リバース プロキシ...
目次インデックスモデルB+ツリーインデックスの選択インデックスの最適化インデックスの選択性カバーイン...
この記事では、CentOS 7 で高可用性 Hadoop 2.10 クラスターを構築する方法を紹介し...
1. イベントが有効になっているかどうかを確認する'%sche%' のような変数を表...
序文最近、MySQL に関するメモをいくつか尋ねる人がいたので、ブログ記事を書かなければなりません。...
ログインページなどのホームページを作成する場合、大きな背景画像を配置する必要があり、さまざまな画面の...
Docker イメージのダウンロードが停止したり、遅すぎたりするネットでいろいろな方法を検索しました...
序文ミニプログラムを開発する過程では、録音機能を実装し、録音を再生し、録音をサーバーにアップロードす...
jQueryプラグインは、参考のためにダッシュボードを実装します。具体的な内容は次のとおりです。一般...
HTMLはヘッドとボディの2つの部分で構成されています** ヘッド内のタグはヘッドタグです** タイ...
最近、次のデータ型のデータベースに遭遇しました:decimal(14,4)発生した問題は次のとおりで...
この記事は、参考のためにMySQL 8.0.12のインストールグラフィックチュートリアルを記録してい...
目次序文ローリング原理成し遂げるソースコード参照する序文モバイル Web ページの日常的な開発では、...
1. ユーザーとグループを追加する1. mysqlユーザーグループを追加する # グループ追加mys...
目次序文バブルソート基本アルゴリズム2 番目の書き方は、基本的なアルゴリズムに基づいて改良されていま...