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 サーバーの設定例です:

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

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

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

<template>
  <div>
    <h1>Welcome to Home Page!</h1>
    <router-link to="/about">About</router-link>
  </div>
</template>

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

<template>
  <div>
    <h1>Welcome to About Page!</h1>
    <router-link to="/">Home</router-link>
  </div>
</template>

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

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

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

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