Vue Router 的路由模式

在创建路由器实例时，history 配置允许我们在不同的历史模式中进行选择。

单页面应用的路由，需要解决2个问题：
1.如何改变 URL，不触发页面的刷新？
2.如何监听 URL 的变化（包括：用户主动切路由和浏览器的前进后退）？

一、Hash模式

URL表现形式

在内部传递的实际 URL 之前使用了一个哈希字符（#），例如 http://abc.com/#/user/10

服务器配置

不需要服务器配置支持。由于这部分 URL （#哈希字符后面的部分）从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。

优缺点

优点：

  • 兼容性强
  • 不需要额外的服务器配置

缺点：

  • 不利于SEO
  • 不美观

底层实现原理

Hash 模式利用了 URL 的#符号以及hashchange事件。具体原理如下：

  • URL 结构：http://example.com/#/home。#后面的部分称为哈希（hash），在浏览器中改变哈希值不会导致页面刷新。
  • 监听hashchange事件：当 URL 中的哈希部分发生变化时，触发hashchange事件。Vue Router 通过监听这个事件来更新视图。
  • 更新视图：根据当前的哈希值，Vue Router 渲染相应的组件。
window.addEventListener('hashchange', () => {
  // 获取当前的哈希值
  const currentHash = window.location.hash;
  // 根据哈希值更新视图
  updateView(currentHash);
});

二、HTML5 History模式

URL表现形式

URL 会看起来很 "正常"，例如http://abc.com/#/user/10

服务器配置

需要服务器配置支持。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 http://abc.com/#/user/10，就会得到一个 404 错误。
要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源，它应提供与你的应用程序中的 index.html 相同的页面。

服务器配置示例（传送门）：https://router.vuejs.org/zh/guide/essentials/history-mode.html#服务器配置示例

优缺点

优点：

  • 利于SEO
  • 美观

缺点：

  • 兼容性不强。仅在现代浏览器中可用。
  • 需要额外的服务器配置

底层实现原理

History 模式利用了 HTML5 的 History API，包括pushState、replaceState和popstate事件。具体原理如下：

  • URL 结构：http://example.com/home。没有#符号，URL 更加美观和直观。
  • 使用 History API 改变 URL：通过pushState和replaceState方法来改变 URL 而不重新加载页面。然后进行视图更新。
  • 监听popstate事件：当用户点击浏览器的前进或后退按钮时，会触发popstate事件，Vue Router 根据事件中的状态信息更新视图。
  • 服务器配置：需要服务器配置所有路径都指向同一个 HTML 文件，以避免刷新页面导致的 404 错误。
// 改变 URL 而不刷新页面
history.pushState({}, '', '/home');

// 监听 popstate 事件
window.addEventListener('popstate', (event) => {
  // 获取当前的路径
  const currentPath = window.location.pathname;
  // 根据路径更新视图
  updateView(currentPath);
});

三、Memory模式

Memory 模式不会假定自己处于浏览器环境，因此不会与 URL 交互也不会自动触发初始导航。这使得它非常适合 Node 环境和 SSR。

详情请参考：https://router.vuejs.org/zh/guide/essentials/history-mode.html#Memory-模式

posted @ 2021-03-31 09:55  Better-HTQ  阅读(176)  评论(0)  编辑  收藏  举报