Vue学习笔记 之 History 路由 和 Hash 路由的区别 及 History 模式时，Nginx的配置方式

一、History 模式、Hash 模式

  Vue Router 是 Vue.js 官方的路由管理器，用于构建单页应用的前端路由。它允许你通过定义路由配置来映射不同的 URL 到对应的组件，实现页面间的跳转和导航。Vue Router 支持两种路由模式：history 模式和 hash 模式。

1、History 模式

  在 History 模式下，Vue Router 通过使用 HTML5 History API 来管理路由，不会在 URL 中使用哈希（#）作为路由的标记。相反，它依赖于浏览器的 History API 来管理 URL 的变化。

  使用 History 模式需要后端服务器的配合。当用户在浏览器中直接访问页面时，或者刷新页面时，后端服务器需要配置，以确保返回对应的前端路由页面。这是因为在 History 模式下，前端的路由和后端的路由是分离的，后端需要将所有路由请求都重定向到前端的入口页面。

• 使用 history 模式时，URL 中没有 # 符号。
• 通过 HTML5 History API (pushState 和 replaceState) 改变 URL，实现前端路由跳转。
• 服务器需要进行相应的配置，以确保在刷新页面或直接访问某个子路由时，仍能正确返回前端路由对应的页面。
• 示例 URL：https://example.com/my-route

2、Hash 模式

  在 Vue Router 中，Hash 模式是一种简单且常见的路由模式，它使用 URL 中的哈希（#）来管理路由。当 URL 中的哈希值发生变化时，Vue Router 将根据哈希值来匹配对应的路由。

• 使用 hash 模式时，URL 中会有一个 # 符号，后面跟着路由路径。
• 通过监听 hashchange 事件来改变 URL 中的哈希值，实现前端路由跳转。
• 不需要服务器进行特殊配置，因为哈希部分的变化不会发送到服务器。
• 示例 URL：https://example.com/#/my-route

3、History 模式 与 Hash 模式 的区别

1. History 模式的 URL 更美观和干净，更类似传统的 URL 结构。
2. Hash 模式的 URL 兼容性好，不需要特殊的服务器配置，可以在几乎所有的环境中使用。
3. 在使用 History 模式时，需要确保服务器端配置正确，以便在刷新页面或直接访问子路由时，能正确返回对应的页面。而 Hash 模式不需要这样的配置。

  总之，History 模式的 URL 可能会更符合用户的习惯，但需要对服务器进行配置。Hash 模式则更简单易用，但 URL 中会有一个 # 符号。选择使用哪种路由模式，取决于项目需求和服务器环境。

二、使用History 模式时，Nginx服务器配置

  History 模式时，服务器需要进行相应的配置，以确保在刷新页面或直接访问某个子路由时，仍能正确返回前端路由对应的页面。当使用的是 Nginx 服务器时，可以使用 try_files 配置将所有请求重定向到前端入口页面。同时，在vue项目中也需要增加相关配置，保证路由地址正确，具体实现如下：

  首先，main.js文件，需要引入router路由，代码如下：

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，在该文件我们配置了History 模式，同时还需要配置base路径，保证路由访问时的正确。代码实现如下：

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匹配，对应的项目部署在服务器上的二级目录地址“/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/中部署。至此，我们就可以正常使用History 模式的路由了。