Vue Router 路由模式详解：历史模式 vs 哈希模式

Vue Router 路由模式详解：历史模式 vs 哈希模式

引用

CSDN

1.

https://m.blog.csdn.net/vvilkim/article/details/145948633

Vue Router是Vue.js项目中用于实现单页面应用（SPA）路由管理的核心工具。它提供了两种路由模式：历史模式（History Mode）和哈希模式（Hash Mode）。本文将详细对比这两种模式，帮助开发者根据项目需求选择最合适的路由模式。

什么是路由模式？

路由模式决定了Vue Router如何管理URL和页面之间的映射关系。Vue Router默认使用哈希模式，但开发者可以根据需要切换到历史模式。

• 哈希模式：通过URL的哈希部分（#）来模拟完整的URL。
• 历史模式：利用HTML5的history.pushStateAPI实现无刷新跳转，URL更加直观。

URL表现形式

哈希模式

在哈希模式下，URL会包含一个#符号，路由信息位于#之后。例如：

http://example.com/#/home

• 哈希部分（#/home）不会发送到服务器，因此页面刷新时不会触发服务器请求。
• 这种模式兼容性较好，支持所有浏览器，包括旧版浏览器。

历史模式

在历史模式下，URL看起来更干净，没有#符号。例如：

http://example.com/home

• 这种模式依赖HTML5的history.pushStateAPI，URL更加直观。
• 但需要服务器支持，否则刷新页面时会返回404。

服务器配置

哈希模式

哈希模式不需要额外的服务器配置，因为#后面的内容不会发送到服务器。无论是刷新页面还是直接访问URL，服务器都会返回index.html，Vue Router会根据哈希部分渲染对应的组件。

历史模式

历史模式需要服务器配置，以确保所有路由都返回index.html。否则，当用户直接访问或刷新页面时，服务器会尝试查找对应的文件或路径，导致404错误。

以Nginx为例，配置如下：

location / {
  try_files $uri $uri/ /index.html;
}

这段配置的意思是：如果请求的文件或路径不存在，则返回index.html，由Vue Router处理路由。

兼容性

哈希模式

哈希模式兼容性非常好，支持所有浏览器，包括IE9及以下版本。如果你的项目需要兼容旧版浏览器，哈希模式是更好的选择。

历史模式

历史模式依赖HTML5的history.pushStateAPI，因此不支持IE9及以下版本。如果你的项目不需要考虑旧版浏览器，历史模式可以提供更优雅的URL。

SEO支持

哈希模式

哈希模式对SEO不友好，因为搜索引擎通常不会抓取#后面的内容。如果你的项目需要SEO支持，哈希模式可能不是最佳选择。

历史模式

历史模式对SEO更友好，因为URL更加直观，搜索引擎可以正确抓取页面内容。如果你的项目需要SEO支持，建议使用历史模式，并确保服务器配置正确。

如何设置路由模式

在Vue Router中，可以通过mode或history选项来设置路由模式。以下是示例代码：

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter({
  mode: 'history', // 使用历史模式
  // mode: 'hash', // 使用哈希模式（默认）
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ],
});
export default router;

如何选择路由模式？

• 如果你的项目需要兼容旧版浏览器，或者对URL美观度要求不高，可以选择哈希模式。
• 如果你的项目需要SEO支持，或者希望URL更加直观，可以选择历史模式，并确保服务器配置正确。

总结

Vue Router的两种路由模式各有优缺点，开发者应根据项目需求选择合适的方式：

• 哈希模式：简单易用，兼容性好，适合对SEO和URL美观度要求不高的项目。
• 历史模式：URL更加直观，支持SEO，适合现代浏览器环境下的项目。

无论选择哪种模式，Vue Router都能为你的单页面应用提供强大的路由管理能力。希望本文能帮助你更好地理解和使用Vue Router！