🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
文章目录
- 摘要：
- 引言：
- 正文：
- 1. 🔧 hash模式
- 2. 🔧 history模式
- 3. 🔧 两种模式的对比
- 🌟 总结
- 参考资料：
摘要：
🤔 Vue路由提供了两种模式：hash模式与history模式。本文将介绍这两种模式的特点与使用场景，帮助读者更好地掌握Vue路由的配置与应用。👩💻
引言：
🌈 Vue.js框架以其简洁的语法和声明式的数据绑定而受到开发者的喜爱。在单页面应用（SPA）中，路由管理是不可或缺的功能。Vue路由提供了两种模式：hash模式与history模式，以满足不同的开发需求。在这篇文章中，我将带你探究这两种模式的特点和应用，以期帮助你更好地运用Vue路由。🚀
正文：
1. 🔧 hash模式
在 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 安装：
npm install vue-router --save或
yarn add vue-router -
配置路由：在项目中创建一个名为 router.js 的文件，用于配置路由。首先，引入 vue 和 vue-router：
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router)然后，定义路由规则，并创建一个 Router 实例：
export default new Router({ mode: 'hash', routes: [ { path: '/about', name: 'about', component: () => import('@/components/About.vue') }, { path: '/', name: 'home', component: () => import('@/components/Home.vue') } ] })这里，mode 设置为 ‘hash’，表示使用 hash 模式。
-
在 main.js 中引入 router：在 main.js 文件中，引入刚刚创建的 router.js 文件：
import Vue from 'vue' import App from './App.vue' import router from './router' new Vue({ router, render: h => h(App) }).$mount('#app') -
使用 router-view 组件：在需要跳转页面的地方，使用 router-view 组件。当点击 router-link 时，页面会根据配置的 hash 值进行跳转：
<router-view></router-view>
总结来说，hash 模式是一种页面跳转的方式，不会改变浏览器的 URL，但页面会重新加载。在 Vue 项目中，hash 模式通常用于前端路由，通过 vue-router 实现。
2. 🔧 history模式
在 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 安装：
npm install vue-router --save或
yarn add vue-router -
配置路由：在项目中创建一个名为 router.js 的文件，用于配置路由。首先，引入 vue 和 vue-router：
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router)然后，定义路由规则，并创建一个 Router 实例：
export default new Router({ mode: 'history', routes: [ { path: '/about', name: 'about', component: () => import('@/components/About.vue') }, { path: '/', name: 'home', component: () => import('@/components/Home.vue') } ] })这里，mode 设置为 ‘history’，表示使用 history 模式。
-
在 main.js 中引入 router：在 main.js 文件中，引入刚刚创建的 router.js 文件：
import Vue from 'vue' import App from './App.vue' import router from './router' new Vue({ router, render: h => h(App) }).$mount('#app') -
使用 router-view 组件：在需要跳转页面的地方，使用 router-view 组件。当点击 router-link 时，页面会根据配置的 history 值进行跳转：
<router-view></router-view>
总结来说，history 模式是一种页面跳转的方式，会在浏览器的 URL 栏中显示跳转后的页面地址，并且页面不会重新加载。在 Vue 项目中，history 模式通常用于前端路由，通过 vue-router 实现。
3. 🔧 两种模式的对比
- URL表现：hash模式下URL包含#号，而history模式下URL更为简洁。
- 性能：history模式在部分浏览器中可能会有性能问题，如重复的history.pushState调用。
- 兼容性：hash模式兼容性更好，但history模式在现代浏览器中得到了广泛支持。
🌟 总结
在本篇文章中，我们详细解析了Vue路由的两种模式：hash模式与history模式。通过对比分析，我们应该对这两种模式有了更深入的了解。在实际开发中，根据项目需求和场景选择合适的模式，将使我们的Vue应用更加高效和优质。🚀
参考资料：
- Vue.js官方文档：路由
- Vue Router官方文档
🌟 感谢您的阅读！如果您有任何疑问或建议，欢迎在评论区留言。💬
