Vue学習記：ヒストリールーティングとハッシュルーティングの違いとヒストリーモードでのNginxの設定方法

1. ヒストリーモード、ハッシュモード

Vue Router は Vue.js の公式ルーティングマネージャーで、シングルページアプリケーションのフロントエンドルーティングを構築するために使用されます。ページ間のジャンプやナビゲーションを実現するルーティング構成を定義することで、さまざまな URL を対応するコンポーネントにマップできます。 Vue Router は、ヒストリーモードとハッシュモードの 2 つのルーティングモードをサポートします。

1. ヒストリーモード

˜履歴モードでは、Vue Router は HTML5 History API を使用してルーティングを管理し、URL 内のハッシュ (#) をルーティングタグとして使用しません。代わりに、ブラウザの History API に依存して URL の変更を管理します。

ヒストリーモードの使用にはバックエンドサーバーの協力が必要です。ユーザーがブラウザー内のページに直接アクセスする場合、またはページを更新する場合、対応するフロントエンドルーティングページが返されるようにバックエンドサーバーを構成する必要があります。これは、履歴モードではフロントエンドルーティングとバックエンドルーティングが分離されており、バックエンドはすべてのルーティングリクエストをフロントエンドエントリページにリダイレクトする必要があるためです。

履歴モードを使用する場合、URL に # 記号は含まれません。
HTML5 History API (pushState および replaceState) を介して URL を変更し、フロントエンドルーティングジャンプを実装します。
ページを更新するとき、またはサブルートに直接アクセスするときに、フロントエンドルートに対応するページを正しく返すことができるように、サーバーを適切に構成する必要があります。
URL の例: https://example.com/my-route

2. ハッシュモード

ハッシュモードは、Vue Router のシンプルで一般的なルーティングモードで、URL 内のハッシュ (#) を使用してルーティングを管理します。 URL のハッシュ値が変更されると、Vue Router はハッシュ値に基づいて対応するルートを照合します。

ハッシュモードを使用する場合、URL には # 記号があり、その後にルーティングパスが続きます。
hashchange イベントをリッスンして URL のハッシュ値を変更し、フロントエンドルーティングジャンプを実装します。
ハッシュ部分への変更はサーバーに送信されないため、サーバーの特別な構成は必要ありません。
URL の例: https://example.com/#/my-route

3. ヒストリーモードとハッシュモードの違い

履歴モードの URL はより美しく、クリーンで、従来の URL 構造に似ています。
ハッシュモード URL は互換性が高く、特別なサーバー構成を必要とせず、ほぼすべての環境で使用できます。
履歴モードを使用する場合、ページを更新するとき、またはサブルートに直接アクセスするときに、対応するページが正しく返されるように、サーバー側の構成が正しいことを確認する必要があります。ハッシュモードではそのような構成は必要ありません。

つまり、履歴モードの URL はユーザーの習慣により近いかもしれませんが、サーバーの設定が必要です。ハッシュモードはシンプルで使いやすいですが、URL に # 記号が含まれます。使用するルーティングモードの選択は、プロジェクトのニーズとサーバー環境によって異なります。

2. 履歴モード使用時の Nginx サーバー構成

履歴モードでは、ページを更新するとき、またはサブルートに直接アクセスするときに、フロントエンドルートに対応するページが引き続き正しく返されるように、サーバーを適切に構成する必要があります。 Nginx サーバーを使用する場合、try_files 構成を使用して、すべてのリクエストをフロントエンドのエントリページにリダイレクトできます。同時に、ルーティングアドレスが正しいことを確認するために、関連する設定も vue プロジェクトに追加する必要があります。具体的な実装は次のとおりです。

まず、main.js ファイルにルータルーティングを導入する必要があり、コードは次のとおりです。

import Vue from 'vue'
import App from './App.vue'
import router from "./router/index";

Vue.config.productionTip = false

new Vue({
    
    
	router,
  render: h => h(App),
}).$mount('#app')

それでは、App.vueファイルの基本構成ですが、特別な処理は必要なく、コードは次のとおりです。

<template>
  <div id="app">
    <h1>APP B</h1>
	<router-view></router-view>
  </div>
</template>

<script>

export default {
    
    
  name: 'App'
}
</script>

<style>

</style>

次に、ルーティング構成ファイル ./router/index.js を変更します。このファイルでは、履歴モードを構成し、正しいルーティングアクセスを確保するためにベースパスも構成する必要があります。コードは次のように実装されます。

import VueRouter from 'vue-router';
import Hello from "../components/Hello.vue"
import Vue from "vue";

Vue.use(VueRouter)
const router = new VueRouter({
    
    
	mode: 'history',
	base:'/app2/',
    routes:[
        {
    
    
            path: '/hello',
            name: 'hello',
            component: Hello
        },
    ],
})

export default router;

次に、パッケージング構成ファイル vue.config.js を変更します。ここでは、publichPath が上記の BaseUrl と一致し、対応するプロジェクトがサーバー上の 2 番目のディレクトリアドレス「/app2/」にデプロイされていることを確認する必要があります。

module.exports = {
    
    
  transpileDependencies: ["vue"],
  publicPath: '/app2/', // 设置上下文路径，与Tomcat或Nginx中的上下文路径保持一致
  indexPath: 'index.html', // 相对于打包路径index.html的路径
  outputDir: process.env.outputDir || 'app2', // 'dist', 生产环境构建文件的目录
  devServer: {
    
    
    headers: {
    
    
      'Access-Control-Allow-Origin': '*',
    }
  }
};

最後に、Nginx 構成ファイル nginx.conf を変更し、try_files を使用してすべてのリクエストをフロントエンドエントリページにリダイレクトします。構成は次のとおりです。

server {
    
    
      listen       8000;
      server_name  192.168.1.87;
	  root   html;
      location /app2 {
    
    
	     try_files $uri $uri/ /app2/index.html;
      }
}

上記の構成によれば、フロントエンドページの場所は nginx ルートディレクトリの ./html/app2/ にデプロイされる必要があります。この時点で、ヒストリーモードルーティングを通常どおり使用できます。