ヒストリーモードでVueルーティングを更新するとレンダリングされたページが反映されない問題の対処方法

今回は、vuerouting履歴モードで更新時にページをレンダリングするときに反映されない場合の対処法vue routingが履歴モードで更新するときにページを反映しない場合の注意点についてお届けします。ここからが実戦 事例を見てみましょう。

vue-routerのネストされたルーティング(サブルーティング)が履歴モードで更新時にページをレンダリングできない問題を解決します

詳細は以下の通りです。 1. 例外の説明

元々は vue-router のハッシュ モードが使用されていましたが、ハッシュ モードの URL には「#」記号が必要で、見た目が悪いだけでなく、一部のシナリオ (WeChat 共有) ではルーティングの「#」が破壊されてしまいます。ページは " #" 次のコンテンツが処理されます) を変更するため、履歴モードを使用して、バックエンドに nginx 構成を変更させる必要があります:

location / { try_files $uri $uri/ /index.html; }

vue-router は履歴モードを使用し、ネストされたルーティングを使用します:

const router = new Router({
 mode: 'history',
 routes: [
  {
   path: '/',
   component: mall,
   name: 'mall'
  },
  ……
  //我的银行卡
  {
   path: '/myCard',
   meta: { requireAuth: true },
   component: myCard,
   name: 'myCard',
   children:[
   { path:'', component: card},
   { path:'add', component: add}
   ]
  }
   ……
 ]
})

ルーティングおよびネストされたルーティング ページにアクセスすると、表示は正常ですが、ページを更新すると、ネストされたルーティング ページが異常になります:

ページのスタイルが完全に混乱しています。ページ リクエストによって読み込まれた 静的 ファイルを見てください。すべての静的ファイルは 404;

です。

2. 例外分析

1. 公式ドキュメントのネストされたルーティングの説明を見てください:

2. 前の例外ページをもう一度見ると、親ルートがルート ディレクトリになっていることがわかります。ファイル パスを確認してください:

。

3. 導入した異常なファイルを見てください。これらは、index.html ファイル内で直接参照されています。つまり、ルート パスの下に導入されています。以前のハッシュ モードでは、ルート パスは変更されないため、これらの静的ファイルをindex.html ファイルに直接導入することが可能ですが、履歴モードを使用した後は、ルート パスが固定されません。その場合、この導入方法は実行不可能であるため、上記のページをレンダリングできません:

3. 問題を解決する

ここで少し恥ずかしいのですが、私は最初、Import 経由でメイン Vue に静的スタイル ファイルを導入することを検討しました。それは確かに実現可能でしたが、最終的には、index.html 内の静的ファイル導入パスを直接変更しても問題ないことがわかりました。ファイル:

変更前:

<script src="./static/js/stomp.js"></script>

修正後

りぃ

4.原則

./ は、ユーザーが配置されている現在のディレクトリを指します (相対パス)。 / は、プロジェクトのルート ディレクトリであるルート ディレクトリ (絶対パス、プロジェクト ルート ディレクトリ) を指します。 ハッシュモードではルートパスはプロジェクトのルートディレクトリに固定されますが、ヒストリーモードでは

で始まるネストされたパスがルートパスとみなされますので、「./」を使用して導入すると、ファイル自体はネストされたパス ディレクトリではなくプロジェクトのルート ディレクトリにあるため、ファイルは見つかりません。

概要

、ハッシュ モードやヒストリー モードに関係なく、「/」を使用してプロジェクトのルート ディレクトリから静的ファイルを直接インポートできます。

PS: しばらく前にこの問題に遭遇しました。Baidu で長い間検索しましたが、この質問をする人はほとんどおらず、誰も答えてくれませんでした。多くのフロントエンドの専門家にも質問しましたが、それでもこの問題は解決できませんでした。 「./」を書き慣れているからかもしれません。 そして、「../」で始まるパスですが、私は静的ファイルの導入方法の問題に気付かず、さまざまな方法を試しましたが、最終的には、恥ずかしながら、実際には非常に単純な問題であることがわかりました。それは、フレームワークの最下層を完全に理解していなかっただけです。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

node.js を MySQL に接続する方法

React サーバー レンダリングを実装する詳細な手順

以上がヒストリーモードでVueルーティングを更新するとレンダリングされたページが反映されない問題の対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。