一、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 模式 的区别
- History 模式的 URL 更美观和干净，更类似传统的 URL 结构。
- Hash 模式的 URL 兼容性好，不需要特殊的服务器配置，可以在几乎所有的环境中使用。
- 在使用 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 模式的路由了。