Vue路由模式中hash和history两种模式有什么区别和特点？

本文共计1267个文字，预计阅读时间需要6分钟。

目录 + 1. 路由概念 + 2. Hash模式 + 3. History模式 + 1. 路由概念 + 路由的本质是一种对应关系，根据不同的URL请求，返回不同的资源。URL地址和真实资源之间存在着一种对应关系。

目录

• 1. 路由概念
• 2. hash模式
• 3. history路由模式

1. 路由概念

路由的本质就是一种对应关系，根据不同的URL请求，返回对应不同的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。

SPA(Single Page Application)单页面应用程序,基于前端路由而起：整个网站只有一个页面，通过监听地址栏中的变化事件，来通过Ajax局部更新内容信息显示、同时支持浏览器地址栏的前进和后退操作。

前端路由有两种模式：hash 模式和 history 模式。

2. hash模式

概述：

hash 路由模式是这样的：xxx.abc.com/#/xx。 有带#号，后面就是 hash 值的变化。改变后面的 hash 值，它不会向服务器发出请求，因此也就不会刷新页面。并且每次 hash 值发生改变的时候，会触发 hashchange 事件。因此我们可以通过监听该事件，来知道 hash 值发生了哪些变化。