阿珊详解Vue路由的两种模式：hash模式与history模式

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

摘要：

🤔 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 模式的方法如下：

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

   npm install vue-router --save
   

   或

   yarn add vue-router
   

2. 配置路由：在项目中创建一个名为 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 模式。

3. 在 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')
   

4. 使用 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 模式的方法如下：

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

   npm install vue-router --save
   

   或

   yarn add vue-router
   

2. 配置路由：在项目中创建一个名为 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 模式。

3. 在 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')
   

4. 使用 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应用更加高效和优质。🚀

参考资料：

1. Vue.js官方文档：路由
2. Vue Router官方文档

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