路由哈希路由和传统路由

路由:哈希路由和传统路由

路由类型

哈希路由是单页面应用程序（SPA）常用的一种前端路由方式，它利用JavaScript来动态加载内容，而不会引起服务器端的页面重新加载。这种方式可以提高用户体验，尤其是在需要频繁切换视图的应用程序中。

要确定一个网站使用的是哈希路由（hash routing）还是其他类型的路由（如推导式路由或传统服务器端路由），你可以通过以下几种方式来观察和判断：

  1. 查看URL变化：
    • 哈希路由通常在URL的哈希符号（#）之后发生变化，例如：http://www.example.com/#/home。
    • 推导式路由或服务器端路由则通常在哈希符号前的部分发生变化，例如：http://www.example.com/home。
  2. 页面是否重新加载：
    • 使用哈希路由时，当用户导航至不同的路由，页面不会重新加载，而是通过JavaScript动态更新内容。
    • 如果路由变化导致页面重新加载，则很可能使用的是服务器端路由。
  3. 浏览器的前进和后退按钮：
    • 在哈希路由中，浏览器的前进和后退按钮可以跟踪不同的路由状态，不会引起页面的重新加载。
    • 服务器端路由则依赖于服务器来处理前进和后退操作，每次点击都会重新加载页面。
  4. 查看网络请求：
    • 使用开发者工具（通常可以通过按F12或右键选择“检查”打开）查看网络请求。哈希路由通常不会向服务器发送额外的请求，页面内容的变化完全由前端JavaScript控制。
  5. 查看源码：
    • 查看网页的HTML源码，通常在<head>标签中，如果包含如React Router、Vue Router等前端路由库的引用，那么很可能是哈希路由。
  6. 查看控制台输出：
    • 在浏览器的开发者工具的控制台（Console）中查看路由库的输出信息，这可能会直接告诉你使用的是哪种路由。
  7. 尝试修改哈希：
    • 直接在浏览器地址栏修改URL中的哈希部分，如果页面内容随之变化而没有重新加载，那么可能是哈希路由。

哈希模式（Hash Mode）

哈希模式是Vue Router默认的路由模式，它使用URL中的哈希符号（#）来实现路由。例如：

1
https://www.example.com/#/user/profile

在这个模式下，哈希符号之前的部分（https://www.example.com/）是基础URL，而哈希符号之后的部分（user/profile）是路由路径，表示用户正在查看的页面或内容。

优点：

  • 简单：实现简单，不需要服务器配置。
  • 兼容性：由于哈希（#）在URL中的历史较久，所以兼容性较好。

缺点：

  • SEO不友好：哈希部分不会被搜索引擎解析，不利于搜索引擎优化（SEO）。
  • URL显示：URL中包含哈希符号，不够美观。

HTML5模式（History Mode）

HTML5模式利用了HTML5的History API来实现路由，使得URL更加“干净”和“正常”，看起来就像传统的网址路径。例如：

1
https://www.example.com/user/profile

优点：

  • SEO友好：URL结构清晰，有利于搜索引擎优化。
  • 美观：URL中没有哈希符号，更加简洁。

缺点：

  • 服务器配置：需要服务器配置来支持前端路由。服务器需要能够对所有的服务器端路由返回应用的index.html文件，然后由前端路由接管。

  • 复杂性：相对于哈希模式，可能需要更复杂的配置。

服务器配置示例

由于HTML5模式的URL看起来像是指向服务器上的静态资源，如果没有正确的服务器配置，用户直接访问这样的URL可能会得到404错误。因此，需要在服务器上设置一个回退路由（fallback route），将所有的服务器端路由请求重定向到index.html文件。

Vue Router官方文档提供了一些常见服务器配置的示例，包括Apache、nginx、Node.js等。

总结来说，选择哪种路由模式取决于你的应用需求和服务器配置的便利性。如果你不需要考虑SEO，或者服务器配置比较复杂，可以选择哈希模式。如果你希望有更好的SEO效果和更干净的URL，可以选择HTML5模式，并相应地配置服务器。