Vue-Router: 履歴モードを使用してリフレッシュ不要のルーティングを実装するにはどうすればよいですか?

Vue-Router: 履歴モードを使用してリフレッシュ不要のルーティングを実装するにはどうすればよいですか?

はじめに:
Vue.js は、人気のある JavaScript フレームワークとして、フロントエンド開発で広く使用されています。 Vue.js では、Vue-Router はシングルページ アプリケーション (SPA) のルーティング管理を実装できる非常に重要なツールです。 Vue-Router では、選択できるモードが 2 つあり、1 つはハッシュ モード、もう 1 つはヒストリー モードです。この記事では、Vue-Router の履歴モードを使用してリフレッシュフリー ルーティングを実装する方法を詳しく説明し、具体的なコード例を示します。

1. 履歴モードを理解する
   Vue-Router で履歴モードを使用する場合、URL に # 文字はありませんが、ナビゲーションの切り替えにはブラウザの History API が使用されます。このモードでは、ルートはより美しく、従来の URL パスに近くなります。
2. ヒストリー モードの使用を開始する
   ヒストリー モードの使用は非常に簡単で、Vue Router インスタンスの作成時にモード属性を「history」に設定するだけです。例:

//引入Vue和Vue-Router import Vue from 'vue' import Router from 'vue-router' //在Vue中使用Vue-Router插件 Vue.use(Router) //定义路由 const router = new Router({ mode: 'history', routes: [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ] }) //创建Vue实例，并将router实例添加到Vue实例中 new Vue({ router, render: h => h(App), }).$mount('#app')

3. サーバーの構成
   履歴モードを使用する場合、URL リクエストに応答するようにサーバーを構成する必要があります。履歴モードでは、ページを更新するときや URL に直接アクセスするときにサーバーにリクエストが送信されるため、サーバーは同じホームページ (index.html など) を返すように構成する必要があります。

Apache や Nginx などの一般的なサーバー ソフトウェアでは、これは構成ファイルによって実現できます。以下は Apache サーバーの設定例です:

 RewriteEngine On RewriteBase / RewriteRule ^index.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] 

4. 更新せずにページをジャンプする
   履歴モードを使用した後、Vue-Router はブラウザのナビゲーション イベントを自動的にリッスンします。 page リンク時にページ全体を更新せずに描画コンポーネントを切り替えることで、リフレッシュレスルーティングを実現します。

ホームと概要という 2 つのページがあるとします。ホーム ページでは、About ページにリンクするボタンを追加できます:

About ページでは、Home ページにリンクするボタンも追加できます:

ユーザーがクリック これらのリンクが作成されると、ページは更新されずに対応するコンポーネントに切り替わります。

5. 概要
   Vue-Router の履歴モードは、ブラウザの History API を使用して、更新不要のルート切り替えを実装します。履歴モードを使用すると、URL をより美しく、従来の URL パスに近づけることができます。履歴モードを使用する場合、URL 要求に応答して同じホームページを返すようにサーバーを構成する必要があります。 Vue-Router が提供するルーターリンクコンポーネントを使用することで、リフレッシュフリールーティングを簡単に実装できます。

上記の手順により、Vue-Router の履歴モードを使用して、リフレッシュ不要のルーティングを簡単に実装できます。この記事がお役に立てば幸いです!

以上がVue-Router: 履歴モードを使用してリフレッシュ不要のルーティングを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。