阿珊详解Vue路由的两种模式：hash模式与history模式-编程知识

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过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官方文档

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