Vue路由模式

小灰灰 2024-04-06 15:32 66阅读 0赞

**聚沙成塔·每天进步一点点**

#### 本文内容 ####

*  ⭐ 专栏简介
 *  路由模式
 *   *  1. Hash 模式
     *  2. History 模式
     *  选择路由模式的考虑因素
 *  ⭐ 写在最后

## ⭐ 专栏简介 ##

**Vue学习之旅的奇妙世界** 欢迎大家来到 Vue 技能树参考资料专栏！创建这个专栏的初衷是为了帮助大家更好地应对 Vue.js 技能树的学习。每篇文章都致力于提供清晰、深入的参考资料，让你能够更轻松、更自信地理解和掌握 Vue.js 的核心概念和技术。订阅这个专栏，让我们一同踏上更深入的 Vue学习之旅！为你的前端技能树添砖加瓦！

![在这里插入图片描述][a5e6aa42c7844913a798169ab9707994.png_pic_center]

--------------------

## 路由模式 ##

Vue Router 提供了两种路由模式：`hash` 模式和 `history` 模式。这两种模式分别使用不同的方式来管理应用的路由。

### 1. Hash 模式 ###

在 Hash 模式下，路由路径会被设置成带有 `#` 符号的 URL。这种模式下，路由的变化不会引起浏览器向服务器发送请求，而是通过监听浏览器的 `hashchange` 事件来实现路由的变化。

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

**优点：**

*  支持在不同浏览器和服务器环境下的部署，不需要特殊的服务器配置。
 *  兼容性较好，支持大部分浏览器。

**缺点：**

*  URL 中会带有 `#` 符号，可能影响用户体验。
 *  不支持服务端渲染，对搜索引擎的友好度较低。

### 2. History 模式 ###

在 History 模式下，路由路径不带有 `#` 符号，更类似于传统的 URL。这种模式下，前端路由会使用 HTML5 的 History API 来实现路由的变化，可以使用 `history.pushState` 和 `history.replaceState` 方法来改变 URL，同时通过监听 `popstate` 事件来响应路由变化。

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

**优点：**

*  URL 更加美观，不带有 `#` 符号。
 *  更接近传统的 URL 结构，更符合用户的预期。
 *  可以利用服务端配置来处理路由，支持服务端渲染。

**缺点：**

*  需要特殊的服务器配置，确保在所有路径下返回同一个 HTML 页面。
 *  兼容性较差，在一些老旧的浏览器中可能无法正常工作。

### 选择路由模式的考虑因素 ###

*  如果你的应用需要兼容老旧的浏览器或者无法进行特殊的服务器配置，可以选择使用 Hash 模式。
 *  如果你的应用不需要考虑兼容性问题，并且希望 URL 更加美观，可以选择使用 History 模式。

在进行选择时，需要根据项目的实际需求和环境来决定使用哪种路由模式。

--------------------

## ⭐ 写在最后 ##

欢迎来到《Vue技能树专栏》！本专栏旨在帮助您全面深入地掌握Vue.js，一款现代、灵活且强大的JavaScript框架。无论您是初学者还是有一定经验的开发者，这里都将为您提供详细的指导、实用的技巧以及深入的理解，助您在Vue.js世界中游刃有余。如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我指正，我们一起进步，

[a5e6aa42c7844913a798169ab9707994.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/7d0fa105de0f42469588ec1613880798.png