vue学习-16vue的history模式与hash模式

Vue.js有两种路由模式：history模式和hash模式，它们用于管理前端路由。

History 模式

History 模式：在history模式下，Vue.js使用HTML5 History API来管理路由。这意味着URL看起来像普通的URL，没有哈希符号(#)。例如：http://example.com/my-page。这种模式通常需要服务器配置，以确保在直接访问这些URL时返回正确的页面，而不是404错误。

Vue.js 使用 HTML5 History API 来记录路由历史，并使用一个自定义的链接格式（例如 /#/）来避免出现 404 错误页面。当用户直接输入 URL 或刷新页面时，服务器将返回 index.html 文件（应用程序的主页），然后 Vue.js 将根据 URL 加载相应的组件。

使用 history 模式需要服务器支持，因为服务器需要被配置为支持这种模式。如果服务器没有配置正确，可能会导致应用程序出现 404 错误页面或其他问题。

相比之下，使用 history 模式可以获得更好的用户体验和 SEO 效果。因为 URL 中没有 # 前缀，所以搜索引擎可以更好地理解 URL 中的路径和查询参数。同时，使用 HTML5 History API 可以更方便地记录路由历史和实现滚动事件处理

优点：

• URL更美观和友好。
• 不会在URL中出现#符号。

缺点：

• 需要服务器配置来处理前端路由。
• 可能会导致404错误，需要处理fallback。

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    { path: '/home', component: Home }
  ]
});
1
2
3
4
5
6
7

Hash 模式

Hash 模式：在hash模式下，Vue.js使用URL的哈希部分（#）来管理路由。例如：http://example.com/#/my-page。这种模式不需要特殊的服务器配置，并且在大多数情况下可以立即使用。

使用 hash 模式时，URL 中的 # 前缀不具有实际意义，仅用于区分 URL 中的路径部分和查询参数部分。因此，使用 hash 模式时，应用程序不需要配置 server.js 或其他服务器软件来支持这种模式。

但是，使用 hash 模式有一些限制。例如，它不能使用 HTML5 History API 来记录路由历史，并且需要使用 JavaScript 来处理滚动事件。

优点：

• 无需特殊服务器配置，易于部署。
• 支持老版本浏览器。

缺点：

• URL中包含#符号，可能不够美观。
• 不适用于需要真正的URL路由的情况。

const router = new VueRouter({
  mode: 'hash',
  routes: [
    { path: '/home', component: Home }
  ]
});
1
2
3
4
5
6

选择哪种模式取决于项目需求和服务器配置。如果你的服务器可以处理history模式，并且你希望URL更友好，可以选择history模式。如果你需要快速部署并支持老版本浏览器，可以选择hash模式。