🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

🤔 Vue路由提供了两种模式：hash模式与history模式。本文将介绍这两种模式的特点与使用场景，帮助读者更好地掌握Vue路由的配置与应用。👩‍💻

🌈 Vue.js框架以其简洁的语法和声明式的数据绑定而受到开发者的喜爱。在单页面应用（SPA）中，路由管理是不可或缺的功能。Vue路由提供了两种模式：hash模式与history模式，以满足不同的开发需求。在这篇文章中，我将带你探究这两种模式的特点和应用，以期帮助你更好地运用Vue路由。🚀

在 web 开发中，hash 模式是一种页面跳转的方式，它不会改变浏览器的 URL，但页面会重新加载。

hash 模式的 URL 后面会跟一个 #，例如：http://example.com/#about。

在 Vue 项目中，hash 模式通常用于前端路由。Vue 前端路由使用 hash 模式，是因为 hash 模式不需要后端支持，而且可以在不改变 URL 的同时实现页面跳转和数据更新。

Vue 项目使用 hash 模式的方法如下：

安装 vue-router：首先，需要安装 vue-router。在项目中引入 vue-router，可以通过 npm 或 yarn 安装：

或

配置路由：在项目中创建一个名为 router.js 的文件，用于配置路由。首先，引入 vue 和 vue-router：

然后，定义路由规则，并创建一个 Router 实例：

这里，mode 设置为 ‘hash’，表示使用 hash 模式。

在 main.js 中引入 router：在 main.js 文件中，引入刚刚创建的 router.js 文件：

使用 router-view 组件：在需要跳转页面的地方，使用 router-view 组件。当点击 router-link 时，页面会根据配置的 hash 值进行跳转：

总结来说，hash 模式是一种页面跳转的方式，不会改变浏览器的 URL，但页面会重新加载。在 Vue 项目中，hash 模式通常用于前端路由，通过 vue-router 实现。

在 Web 开发中，history 模式是一种页面跳转的方式，它会在浏览器的 URL 栏中显示跳转后的页面地址，并且页面不会重新加载。history 模式的 URL 看起来和普通的 HTTP URL 一样，例如：http://example.com/about。

在 Vue 项目中，history 模式通常用于前端路由。Vue 前端路由支持 history 模式，使得页面跳转看起来更像传统的网站导航。

Vue 项目使用 history 模式的方法如下：

安装 vue-router：首先，需要安装 vue-router。在项目中引入 vue-router，可以通过 npm 或 yarn 安装：

或

配置路由：在项目中创建一个名为 router.js 的文件，用于配置路由。首先，引入 vue 和 vue-router：

然后，定义路由规则，并创建一个 Router 实例：

这里，mode 设置为 ‘history’，表示使用 history 模式。

在 main.js 中引入 router：在 main.js 文件中，引入刚刚创建的 router.js 文件：

使用 router-view 组件：在需要跳转页面的地方，使用 router-view 组件。当点击 router-link 时，页面会根据配置的 history 值进行跳转：

总结来说，history 模式是一种页面跳转的方式，会在浏览器的 URL 栏中显示跳转后的页面地址，并且页面不会重新加载。在 Vue 项目中，history 模式通常用于前端路由，通过 vue-router 实现。

在本篇文章中，我们详细解析了Vue路由的两种模式：hash模式与history模式。通过对比分析，我们应该对这两种模式有了更深入的了解。在实际开发中，根据项目需求和场景选择合适的模式，将使我们的Vue应用更加高效和优质。🚀

🌟 感谢您的阅读！如果您有任何疑问或建议，欢迎在评论区留言。💬