Vue前端路由hash与history差异深入了解

前言

随着前端技术的发展，单页面应用（SPA）越来越多地出现在我们的生活中，而Vue作为目前较为流行的前端框架，其前端路由功能也越来越重要。本文将详细讲解Vue前端路由中hash与history两种模式的差异，以及它们的使用注意事项。

hash模式

在vue-router中，默认使用的是hash模式。hash模式会将URL中#后的字符作为路由地址使用。

例如，当前URI为https://www.example.com，且应用的路由地址为/home时，hash模式下的URL为https://www.example.com/#/home。

在hash模式下，通过修改location.hash的值，我们可以实现前端路由的跳转，例如：

// 跳转到/home页面
location.hash = '#/home';

值得注意的是，当我们使用hash模式路由时，浏览器不会向服务器发送请求。因此，一个明显的优势是我们不需要服务器支持URL重定向或django等框架的的特定设置。但是，URL带有#号，看起来并不友好。

history模式

history模式中，vue-router会使用浏览器的history API来实现前端路由。这种模式下的URL更友好，不存在hash的问题。例如：我们访问URI为https://www.example.com，且应用的路由地址为/home时，history模式下的URL为https://www.example.com/home。

在history模式下，我们可以使用router.push()来实现路由跳转：

// 跳转到/home页面
router.push('/home');

在history模式下，我们需要在服务器端配置，以保证刷新浏览器的时候不会404。在Nginx中，我们可以添加以下配置实现：

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

这个是由于浏览器在刷新的时候，会根据URL路径从服务器请求资源，因为history模式下的URL跟真实的URI是一样的，不做任何服务器端配置会直接返回404错误。而使用上面的Nginx配置，服务器会先尝试加载URL中指定的文件，如果没有找到，则返回index.html，这样就保证了单页面应用的正常运行。

类似的，如果你使用Apache作为服务器，在.htaccess文件中可以加入以下配置实现：

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

综合比较

	hash模式	history模式
URL友好度	较差	较好
是否向服务器发送请求	否	是
服务器端配置	不需要	需要
兼容性	更好	较差

示例

示例1

在Vue项目中，我们可以通过以下代码来判断当前应用的路由模式：

if (window.history && window.history.pushState) {
  // 支持history模式
  router.mode = 'history';
} else {
  // 不支持history模式，则使用hash模式
  router.mode = 'hash';
}

示例2

在Nginx配置文件中添加上述Nginx配置，以支持history模式下的刷新。

server {
    listen 80;
    server_name example.com;

    root /path/to/your/root;

    index index.html;

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

当浏览器以history模式的URL访问网站时，Nginx服务器会尝试获取对应的路径，如果存在则返回文件；否则，返回index.html。