history和hash两种路由模式的不同之处

一、history和hash两种路由模式的主要区别

1. 原理不同。“history”模式利用了浏览器的历史记录栈，通过“history.pushState()”或“replaceState()”方法修改URL，同时监听“popstate”事件来实现页面跳转，这种模式下，URL可以看起来像标准页面一样，没有“#”号。“hash”模式则是通过监听“window.onhashchange”事件来检测URL中“#”号后的变化，从而实现对页面内容的更新，这种模式下，URL中会包含“#”号，但“#”号后的部分不会发送到服务器；
2. 兼容性和浏览器要求不同。“hash”模式由于使用“#”号，兼容性较高，甚至可以兼容一些老旧的浏览器。“history”模式则使用了HTML5的新特性，对浏览器有更高的要求，例如需要IE10以上的版本才能使用；
3. 后端配合需求不同。“history”模式在页面刷新时，如果后端没有正确配置，可能会导致404错误。“hash”模式则不会因为后端配置问题而导致功能失效；
4. 路由表现不同。“history”模式的URL看起来更传统，没有“#”号，提供更好的用户体验。“hash”模式的URL中包含“#”号，可能会影响URL的美观。

pushState()和replaceState()都是HTML5 History API提供的方法，用于操作浏览器历史记录栈，并且在使用路由管理工具时常见。它们的主要区别在于如何处理历史记录的添加或替换：

1. pushState()方法会向浏览器历史记录栈中添加一条新记录，同时更新URL。这意味着用户可以通过浏览器的前进和后退按钮跳转到这个新的页面状态。

2. replaceState()方法也会修改URL，但不会向历史记录栈中添加新记录，而是直接替换当前的历史记录。这样做会让用户在点击后退按钮时跳过当前页面，直接返回前一个页面。

一般来说，在以下情况下可以考虑使用pushState()：

1. 当你希望添加新的页面状态到历史记录中，让用户能够通过浏览器的前进和后退按钮进行导航。
2. 当你需要实现动态加载内容、模态框或者局部刷新页面时，可以使用pushState()来更新URL并保存页面状态。

而在以下情况下可以考虑使用replaceState()：

1. 当你想要更新当前页面的URL，但不希望增加新的历史记录时，可以使用replaceState()来替换当前的历史记录。
2. 当你需要在页面跳转时保持页面状态的稳定性，避免用户在后退时再次返回到原始状态时，可以选择使用replaceState()来确保历史记录的干净整洁。

在Vue项目中，通常会使用Vue Router来管理路由，而Vue Router内部已经封装了对pushState()和replaceState()的调用。因此，在一般情况下，开发者不需要直接使用pushState()或replaceState()方法，而是通过Vue Router提供的API来进行路由的操作。

举例来说，当你需要在Vue项目中进行页面跳转时，可以使用Vue Router提供的router.push()和router.replace()方法：

1. 使用router.push()方法实现页面跳转并添加新的历史记录：

// 在组件中调用router.push()实现页面跳转
this.$router.push('/new-route');

2. 使用router.replace()方法实现页面跳转并替换当前的历史记录：

// 在组件中调用router.replace()实现页面跳转并替换当前历史记录
this.$router.replace('/new-route');

二、路由在router.js中的书写方式

hash模式：
路由例如：http://localhost:8080/#/home

history模式：

路由例如: http://localhost:8080/home

三、history和hash两种路由模式的区别的详细说明

1.外观

hash的url有个#符号，显得没有那么美观，而history没有，更好看些；

2.刷新

hash在刷新页面或直接访问特定路由时会加载到地址栏对应的页面。因为在哈希模式下，路由信息存储在 URL 的哈希部分，并不会发送到服务器端。这意味着服务器不需要特殊配置，因为所有的路由请求都将指向同一个 HTML 文件，然后由客户端的 Vue 应用程序解析并显示相应的组件。

而在使用历史模式history下，路由信息会被发送到服务器端。因此，服务器需要正确配置来处理这些路由请求，以确保在刷新页面或直接访问特定路由时，能够返回正确的页面内容。

3.history模式以后上线需要服务器端支持

当使用历史模式的路由时，假设我们有一个单页应用，入口文件为index.html。用户在浏览器中访问https://example.com/about，表示用户想要访问关于页面。

如果没有服务器端配置支持，当用户刷新页面或直接访问https://example.com/about时，服务器会试图寻找对应的about.html文件来响应请求。然而，在单页应用中，并没有独立的about.html文件，所有页面内容都包含在index.html中。

因此，需要在服务器端进行配置以确保在刷新页面或直接访问特定路由时能够正确地响应。

（1）对于基于 Node.js 的后端服务器，可以使用 Express 框架进行配置，示例代码如下：

在上述示例中，我们将静态资源目录设置为public文件夹，其中包含了index.html和其他前端资源文件。通过配置一个通配符路由app.get('*', ...)，所有请求都会被重定向到index.html。这样，无论用户刷新页面或直接访问特定路由，都能够正确地响应请求，并让前端路由来处理页面导航。

（2）如果使用的是Apache服务器，可以通过 .htaccess 文件来设置路由重定向规则。以下是一个示例：

（3）如果使用的是Nginx服务器，可以添加一个 try_files 指令来捕获所有的路由请求，并将它们重定向到入口文件。例如：