Vue：路由管理模式

亦凉 2024-03-26 00:16 64阅读 0赞

## 三种模式 ##

Vue.js 的路由管理有三种模式：

*  Hash 模式（默认）：在 URL 中使用 \# 符号来管理路由。例如，http://example.com/\#/about。这个模式的好处是可以避免浏览器向服务器发送不必要的请求，并且不需要特殊的服务器配置。
 *  History 模式：不使用 \# 符号来管理路由，而是直接在 URL 中显示路径。例如，http://example.com/about。这个模式需要服务器配置支持，因为当用户访问直接 URL 时，服务器需要返回 Vue.js 应用程序的 index.html 文件。
 *  Abstract 模式：这种模式只在测试和非浏览器环境下使用，它不会对 URL 进行任何更改，也不会与浏览器历史记录交互。

const router = new VueRouter({
      mode: 'history',
      routes: [...]
    })

> 除了上述三种模式，还有其他高级路由技术如懒加载、路由守卫等，可以帮助您更好地管理和优化 Vue.js 应用程序的路由。

## History模式原理 ##

Vue.js 的路由管理 History 模式的原理是使用 HTML5 History API。这个 API 允许我们使用浏览器的前进和后退按钮，而不需要重新加载页面。  
 在 History 模式下，当用户访问 Vue.js 应用程序中的一个具体 URL 时，服务器将返回应用程序的 index.html 文件。然后，Vue.js 应用程序会加载并解析该文件，并根据 URL 中的路径渲染正确的组件。  
 为了保证在非Vue.js路由下也能直接访问子路由，通常情况下需要在服务器上进行相关配置，确保访问任何子路径都返回index.html文件。  
 例如，在 Nginx 中，我们可以使用以下配置：

# 这样就可以保证无论用户访问的 URL 是什么，服务器都会返回 index.html 文件。
    # 然后，Vue.js 应用程序会根据 URL 中的路径渲染正确的组件。
    location / {
      try_files $uri $uri/ /index.html;
    }

需要注意的是，在开启 History 模式的情况下，如果您的 Vue.js 应用程序使用了相对路径来加载资源，可能会出现问题。因为这些资源路径是相对于 URL 根路径计算的，而不是相对于文件路径计算的。所以，请确保在使用 History 模式时正确设置 publicPath 配置项来指定相对路径的基本 URL。

## Hash模式原理 ##

在 hash 模式下，URL 中的路由信息位于 \# 符号后面，例如http://example.com/\#/home。当路由信息发生变化时，前端可以获取到路由信息有哪些变化，从而局部渲染加载页面，而不会重新加载整个页面。这使得 Vue.js 可以更快速地响应路由变化，而且不需要请求服务器返回页面。  
 hash模式其实是利用的是浏览器的锚点机制，URL中\#后的内容是用于锚定到页面内部某个位置的，修改它不会重新发送GET请求。因为锚点信息仅存在于浏览器端，不会发送到服务器端。要重新发送GET请求，需要直接修改URL路径或使用页面跳转方法（如点击链接或通过JavaScript执行页面重定向）  
 Vue.js 实现 hash 模式的方式是通过监听浏览器的 hashchange 事件来实现的。当 hash 值发生变化时，Vue.js 会根据新的 hash 值渲染对应的组件。同时，Vue.js 还提供了一个名为 VueRouter 的路由管理器，它封装了所有与 hash 模式相关的操作，包括路由跳转、路由参数处理等。

补充：Vue使用hash模式时也可以在URL中使用锚点。例如，在使用hash模式的情况下，您可以将URL设置为http://example.com/\#/path/to/resource\#anchor，其中anchor就是锚点。但是需要注意的是，锚点并不会影响路由器的导航行为，它只是用于页面内部跳转到指定位置。

## 参考资料 ##

1）[Vue路由的hash模式实现原理][Vue_hash]  
2）[hash路由的实现原理，动态组件和锚点][hash]

[Vue_hash]: https://www.bilibili.com/video/BV13i4y1L7Qn/?spm_id_from=333.337.search-card.all.click&vd_source=b2f3f696e904d6c00b098c112630eacc
[hash]: https://www.bilibili.com/video/BV1qR4y1w7Fx/?spm_id_from=333.337.search-card.all.click&vd_source=b2f3f696e904d6c00b098c112630eacc