vue哈希与history

Vue为开发者提供了两种路由模式：哈希模式和history模式。这两种模式的主要区别在于URL的格式和浏览器返回按钮的行为。

哈希模式是Vue默认配置的路由模式。它的URL格式是以“#”开始的，例如http://www.example.com/#/home。这种URL格式的好处在于它允许我们在前端实现页面跳转，而不需要对服务器端进行任何更改。同时，哈希路由允许浏览器返回按钮正常工作，因为这个按钮只会改变URL哈希部分的值。

然而，哈希模式也有一些缺点。因为哈希部分的值不会发送到服务器端，所以我们无法直接在URL中体现页面状态，例如用户是否登录等。此外，哈希模式的URL显得比较复杂和不美观，对搜索引擎优化也不友好。

相对而言，history模式的URL显得更加美观和规范，例如http://www.example.com/home。这种模式的好处在于可以直接在URL中展现页面状态，而且能够更好地被搜索引擎收录。此外，history模式也不会在URL中显式地出现“#”符号，使得URL更加简洁。

但history模式也存在一些问题，最主要的是：如果直接在URL中输入地址，或者浏览器返回按钮被触发，就会向服务器端发送该请求，而服务器并未定义这样的请求地址，从而出现404错误。为了解决这个问题，我们需要在服务器端进行一些特殊的设置，实现URL重定向，或者让Vue路由中所有请求都指向index.html。

相关问题

vue哈希路由和history路由的区别

Vue中的哈希路由（Hash Router）和History Router的主要区别在于它们处理URL的方式以及浏览器的历史记录管理。

1. **工作原理**:
- **哈希路由**: 使用URL中的`#`符号和查询参数来导航，如`https://example.com/#/users`。刷新页面或点击浏览器回退按钮时，URL不会改变，浏览器地址栏不会更新，但内容会更新。数据变化依赖于前端路由。
- **History Router**: 使用HTML5 History API，改变了历史记录并允许用户直接在浏览器地址栏输入完整的URL（如`https://example.com/users`），页面加载会触发服务器响应或预渲染，刷新或回退时，真正的URL会更新。

2. **浏览器兼容性**:
- **哈希路由**: 更广泛支持旧版浏览器，因为所有现代浏览器都支持`hashchange`事件。
- **History Router**: 需要更新的浏览器支持，尤其是对于`pushState`和`popstate`操作，某些老版本浏览器可能不完全支持。

3. **SEO**:
- **哈希路由**: 对搜索引擎不太友好，因为搜索引擎通常只抓取可见的URL部分，而`#`后的信息不会被抓取。
- **History Router**: 更有利于SEO，因为它能提供更好的用户体验和真实的URL结构，但需要服务器支持URL重定向或者预渲染技术。

4. **SPA应用**:
- **哈希路由**: 更适合单页应用(SPA)，因为它的状态管理和路由控制都在客户端完成。
- **History Router**: 提供更好的用户体验，特别是在SEO方面，但对于大型、需要频繁刷新的项目可能会有性能影响。

综上，选择取决于项目的需求、目标受众的浏览器支持程度以及SEO策略。

vue哈希模式 打包之后变成history

在Vue中，默认情况下使用的是哈希模式（hash mode），即URL中会有一个#符号。而如果想要使用历史模式（history mode），需要进行一些配置。在打包之后，如果想要将哈希模式变成历史模式，需要进行以下步骤：

1. 首先，在实例化Vue Router时，需要将mode属性设置为'history'，如下所示：

const router = new VueRouter({
  mode: 'history',
  routes: \[...\]
})

2. 然后，在服务器端进行相应的配置。因为历史模式使用的是真实的URL路径，而不是带有#的路径，所以需要服务器进行一些配置，以确保在刷新页面或直接访问某个URL时，能够正确地返回对应的页面。具体的配置方式会根据使用的服务器而有所不同。

需要注意的是，如果没有进行服务器端的配置，使用历史模式可能会导致页面无法正常加载。因此，在切换到历史模式之前，需要确保服务器已经进行了相应的配置。
#### 引用[.reference_title]
- *1* *3* [vuejs中路由器的两种模式-哈希模式与历史模式](https://blog.csdn.net/wzc_coder/article/details/126188157)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [vue路由模式及 history 模式下服务端配置](https://blog.csdn.net/web2022050901/article/details/125482338)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]