面试题 vue router中hash模式和history模式的区别

Vue Router有两种模式：hash模式和history模式。它们的区别如下：

1. hash模式：URL中会包含一个#，例如http://example.com/#/home。当URL中的#后面的内容发生变化时，浏览器不会重新加载页面，而是会触发hashchange事件，然后根据新的URL显示相应的页面内容。

2. history模式：URL中不包含#，例如http://example.com/home。当URL发生变化时，浏览器会向服务器发送请求，服务器返回相应的HTML页面，浏览器重新加载页面并显示新的内容。

总的来说，hash模式的优点是兼容性好，可以在所有浏览器中使用，不需要服务器端的支持；缺点是URL中包含#，看起来不太美观。history模式的优点是URL看起来更加美观，没有#的干扰；缺点是需要服务器端的支持，否则刷新页面会出现404错误。

相关问题

vue中的hash模式和history模式有什么区别

在Vue中，路由有两种模式：hash模式和history模式。

1. Hash模式：
- URL中使用`#`符号，后面跟着路由路径。
- 例如：`http://example.com/#/home`
- Hash模式不会向服务器发送请求，所有的路由都在客户端进行处理。
- Hash模式可以兼容性较好，因为不会影响到服务器的路由配置。

2. History模式：
- URL中没有`#`符号，直接是完整的路径。
- 例如：`http://example.com/home`
- History模式通过使用HTML5 History API，在浏览器历史记录中添加新的记录，实现前端路由切换。
- History模式需要服务器的支持，即在服务器上配置相关的路由规则，确保在刷新页面时能够正确加载对应的前端路由。

区别：
1. URL格式：Hash模式使用带有`#`的URL，而History模式使用无`#`的URL。
2. 兼容性：Hash模式在各种浏览器上都能正常运行，而History模式需要服务器的支持，并且在某些旧版本浏览器中可能不兼容。
3. 美观性：History模式的URL更加美观，没有`#`符号的干扰。而Hash模式的URL可能会被认为是书签链接。
4. 部署：Hash模式不需要特殊的服务器配置。而History模式需要服务器配置支持，以确保在刷新页面时能够正确加载前端路由。

在实际应用中，可以根据具体需求选择使用Hash模式还是History模式。如果不需要考虑兼容性问题，且希望URL更美观，可以选择History模式；如果需要兼容性好，或者无法配置服务器，可以选择Hash模式。

Vue 路由的hash 模式和history 模式有什么区别

Vue 路由提供了两种模式：hash 模式和 history 模式。它们的区别如下：

1. hash 模式：使用 URL 中的 hash (#) 来模拟一个完整的 URL，当 URL 发生变化时，页面不会重新加载。在 Vue 中使用 hash 模式需要在创建路由时设置 mode 为 "hash"，例如：

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

2. history 模式：使用浏览器的 history API 来管理 URL，当 URL 发生变化时，页面会重新加载。在 Vue 中使用 history 模式需要在创建路由时设置 mode 为 "history"，例如：

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

需要注意的是，使用 history 模式需要服务器端进行配置，以避免在页面刷新时出现 404 错误。而使用 hash 模式则不需要服务器端配置。另外，当使用 history 模式时，如果用户直接访问一个路由，而不是通过页面中的链接跳转，也会出现 404 错误。