-
2020-06-29 21:03:31
Vue.js 中hash路由和history路由原理及优缺点
hash模式:
- 原理: 在 url 中的 # 之后对应的是 hash 值, 其原理是通过hashChange() 事件监听hash值的变化, 根据路由表对应的hash值来判断加载对应的路由加载对应的组件
- 优点:
(1) 只需要前端配置路由表, 不需要后端的参与
(2) 兼容性好, 浏览器都能支持
(3) hash值改变不会向后端发送请求, 完全属于前端路由 - 缺点:
(1) hash值前面需要加#, 不符合url规范,也不美观
history模式:
- 原理:
- 优点:
(1) 符合url地址规范, 不需要#, 使用起来比较美观 - 缺点:
(1) 在用户手动输入地址或刷新页面时会发起url请求, 后端需要配置index.html页面用户匹配不到静态资源的情况, 否则会出现404错误
(2) 兼容性比较差, 是利用了 HTML5 History对象中新增的 pushState() 和 replaceState() 方法,需要特定浏览器的支持.
总结: 一般情况下两种路由的模式都可以使用, 具体的使用场景可以结合以上两种模式的优缺点进行选择.
更多相关内容 -
vue路由中hash和history模式的区别
2022-01-26 00:27:10Vue-Router有两种模式：hash模式和history模式。默认的路由模式是hash模式。 1、hash模式 hash模式是开发中默认的模式，也称作锚点，它的URL带着一个#，例如：www.abc.com/#/vue，它的hash值就是#/vue。 特点： ...展开全文Vue-Router有两种模式：hash模式和history模式。默认的路由模式是hash模式。
1、hash模式
hash模式是开发中默认的模式，也称作锚点，它的URL带着一个#，例如：www.abc.com/#/vue，它的hash值就是#/vue。
特点：
- hash值会出现在URL里面，但是不会出现在HTTP请求中，对后端没有影响。所以改变hash值不会重新加载页面。
- 这种模式的浏览器支持度很好，低版本的IE浏览器也支持这种模式。
- hash路由被称为是前端路由，已经成为SPA（单页面应用）的标配。
原理：
hash模式的主要原理就是onhashchange()事件：
window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = location.hash.slice(1); }使用onhashchange()事件的好处就是，在页面的hash值发生变化时，无需向后端发起请求，window就可以监听事件的改变，并按规则加载相应的代码。除此之外，hash值变化对应的URL都会被浏览器记录下来，这样浏览器就能实现页面的前进和后退。虽然是没有请求后端服务器，但是页面的hash值和对应的URL关联起来了。
获取页面hash变化的方法：
（1）监听$route的变化：
// 监听,当路由发生变化的时候执行 watch: { $route: { handler: function(val, oldVal){ console.log(val); }, // 深度观察监听 deep: true } },（2）通过window.location.hash读取#值：
window.location.hash 的值可读可写，读取来判断状态是否改变，写入时可以在不重载网页的前提下，添加一条历史访问记录。2、history模式
history模式直接指向history对象，它表示当前窗口的浏览历史，history对象保存了当前窗口访问过的所有页面网址。URL中没有#，它使用的是传统的路由分发模式，即用户在输入一个URL时，服务器会接收这个请求，并解析这个URL，然后做出相应的逻辑处理。
特点：
- 当使用history模式时，URL就像这样：hhh.com/user/id。相比hash模式更加好看。
- 虽然history模式不需要#。但是，它也有自己的缺点，就是在刷新页面的时候，如果没有相应的路由或资源，就会刷出404来。
history api可以分为两大部分，切换历史状态 和 修改历史状态：
修改历史状态：
包括了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法，这两个方法应用于浏览器的历史记录栈，提供了对历史记录进行修改的功能。只是当他们进行修改时，虽然修改了url，但浏览器不会立即向后端发送请求。如果要做到改变url但又不刷新页面的效果，就需要前端用上这两个API。切换历史状态：
包括forward()、back()、go()三个方法，对应浏览器的前进，后退，跳转操作。配置：
想要设置成history模式，就要进行以下的配置（后端也要进行配置）：
const router = new VueRouter({ mode: 'history', routes: [...] })3、两者对比
调用 history.pushState() 相比于直接修改 hash，存在以下优势:
- pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL；而 hash 只可修改 # 后面的部分，因此只能设置与当前 URL 同文档的 URL。
- pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中。
- pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中；而 hash 只可添加短字符串。
- pushState() 可额外设置 title 属性供后续使用。
- hash模式下，仅hash符号之前的url会被包含在请求中，后端如果没有做到对路由的全覆盖，也不会返回404错误；history模式下，前端的url必须和实际向后端发起请求的url一致，如果没有对用的路由处理，将返回404错误。
4、总结
- hash模式URL上带有#，仅 hash 符号之前的内容会被包含在请求中，如 www.hhh.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
- hash模式URL上没有#，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 www.hhh.com/user/id。如果后端缺少对 /use/id 的路由处理，将返回 404 错误。
-
Vue的路由实现原理：hash模式 和 history模式
2020-09-07 23:03:26Vue的路由实现：hash模式 和 history模式hash 模式(Vue-router默认)示例：hash模式优缺点history 模式示例：history 模式的优缺点：传统路由跟前端路由不同 前端路由有两种模式：hash 模式和 history 模式，接下来...展开全文Vue的路由实现：hash模式 和 history模式
你越是认真生活，你的生活就会越美好——弗兰克·劳埃德·莱特
《人生果实》经典语录前端路由有两种模式：hash 模式和 history 模式，接下来分析这两种模式的实现方式和优缺点。
为了方便演示，需
全局安装 light-server：yarn global add light-server // 或者 npm -g install light-serverhash与history的区别 hash history url显示 有#，很Low 无#，好看 回车刷新 可以加载到hash值对应页面 一般就是404掉了 支持版本 支持低版本浏览器和IE浏览器 HTML5新推出的API hash 模式(Vue-router默认)
hash 模式是一种把前端路由的路径用井号 #拼接在真实 URL 后面的模式。
当井号 #后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发 hashchange 事件。示例：
我们新建一个
hash.html文件，内容为：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>hash</title> </head> <body> <a href="#/a">A页面</a> <a href="#/b">B页面</a> <div id="app"></div> <script> function render() { const app = document.querySelector('#app') app.innerHTML = window.location.hash } window.addEventListener('hashchange', render) </script> </body> </html>在目录下运行：
light-server -s . --port 3000然后打开
http://localhost:3000/hash.html查看效果。在上面的例子中，我们利用
a 标签设置了两个路由导航，把 app 当做视图渲染容器，当切换路由时触发视图容器更新，这其实就是大多数前端框架哈希路由的实现原理。hash模式优缺点
优点
- 只需要前端配置路由表, 不需要后端的参与
- 兼容性好, 浏览器都能支持
- hash值改变不会向后端发送请求, 完全属于前端路由
缺点
- hash值前面需要加#, 不符合url规范,也不美观
history 模式
history API 是 H5 提供的新特性，允许开发者直接更改前端路由，即
更新浏览器 URL 地址而不重新发起请求(将url替换并且不刷新页面)。示例：
我们新建一个
history.html，内容为：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>history</title> </head> <body> <a href="javascript:toA();">A页面</a> <a href="javascript:toB();">B页面</a> <div id="app"></div> <script> function render() { console.log('render') app.innerHTML = window.location.pathname } function toA() { history.pushState({}, null, '/a') render() } function toB() { history.pushState({}, null, '/b') render() } window.addEventListener('popstate', render) </script> </body> </html>在目录下运行：
light-server -s . --historyindex '/history.html' --port 3000然后打开
http://localhost:3000/history.html查看效果。history API 提供了丰富的函数供开发者调用，我们不妨把
控制台打开，然后输入下面的语句来观察浏览器地址栏的变化：history.replaceState({}, null, '/b') // 替换路由 history.pushState({}, null, '/a') // 路由压栈 替换当前地址 被替换地址进入访问历史 history.back() // 返回 history.forward() // 前进 history.go(-2) // 后退2次上面的代码
监听了 popstate 事件，该事件能监听到：- 用户点击浏览器的
前进和后退操作 - 手动调用 history 的
back、forward和go方法
监听不到- history 的
pushState和replaceState方法
这也是为什么上面的 toA 和 toB 函数内部需要手动调用 render 方法的原因。
另外，大家可能也注意到 light-server 的命令多了--historyindex '/history.html'参数，这是干什么的呢？浏览器在刷新的时候，会
按照路径发送真实的资源请求，如果这个路径是前端通过 history API 设置的 URL，那么在服务端往往不存在这个资源，于是就返回404了。
上面的参数的意思就是如果后端资源不存在就返回 history.html 的内容。(试了没反应，知道有这种用法即可)因此在
线上部署基于history API的单页面应用的时候，一定要后端配合支持才行，否则会出现大量的404。
以最常用的 Nginx 为例，只需要在配置的 location / 中增加下面一行即可：try_files $uri /index.htmlhistory 模式的优缺点：
优点：
- 符合url地址规范, 不需要#, 使用起来比较美观
缺点：
- 兼容性不如 hash，且需要服务端支持重定向，否则一刷新页面就404了
- 兼容性比较差, 利用了 HTML5 History对象中新增的 pushState() 和 replaceState() 方法,需要特定浏览器的支持.
传统路由跟前端路由不同
传统的路由指的是：当用户访问一个url时，对应的服务器会接收这个请求，然后解析url中的路径，从而执行对应的处理逻辑。这样就完成了一次路由分发。
而前端路由不涉及服务器，是前端利用hash或者HTML5的history API来实现的，一般用于不同内容的展示和切换。
Vue源码学习目录
谢谢你阅读到了最后~
期待你关注、收藏、评论、点赞~
让我们一起 变得更强
-
vue路由的两种模式，hash和history的区别
2021-02-03 20:35:511.直观区别： hash模式url带#号，history模式不带#号。 2.深层区别： ...功能也有区别，比如我们在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的， 咱们把这个页面分享到第三方展开全文转自：https://www.cnblogs.com/lbcxq/p/12036788.html
1.直观区别：
hash模式url带#号，history模式不带#号。对于 Vue 这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。
为了达到这一目的，浏览器当前提供了以下两种支持：
hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。
比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）
这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。
因此可以说，hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由。使用场景
一般场景下，hash 和 history 都可以，除非你更在意颜值，# 符号夹杂在 URL 里看起来确实有些不太美丽。如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成
URL 跳转而无须重新加载页面。—— Vue-router 官网。另外，根据 Mozilla Develop Network 的介绍，调用 history.pushState() 相比于直接修改 hash，存在以下优势：
pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL；而 hash 只可修改 # 后面的部分，因此只能设置与当前 URL 同文档的 URL；
pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中；
pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中；而 hash 只可添加短字符串；
pushState() 可额外设置 title 属性供后续使用。
当然啦，history 也不是样样都好。SPA 虽然在浏览器里游刃有余，但真要通过 URL 向后端发起 HTTP 请求时，两者的差异就来了。尤其在用户手动输入 URL 后回车，或者刷新（重启）浏览器的时候。hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.abc.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”history模式怕啥
通过history api，我们丢掉了丑陋的#，但是它也有个毛病：
不怕前进，不怕后退，就怕刷新，f5，（如果后端没有准备的话）,因为刷新是实实在在地去请求服务器的,不玩虚的。在hash模式下，前端路由修改的是#中的信息，而浏览器请求时是不带它玩的，所以没有问题.但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来。
小结
结合自身例子，对于一般的 Vue + Vue-Router + Webpack + XXX 形式的 Web 开发场景，用 history 模式即可，只需在后端（Apache 或 Nginx）进行简单的路由配置，同时搭配前端路由的 404 页面支持。
————————————————
版权声明：本文为CSDN博主「麦兜_冰夕」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lyn1772671980/article/details/808044192.深层区别：
hash模式url里面永远带着#号，我们在开发当中默认使用这个模式。
如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，是个正常的url适合推广宣传
功能也有区别，比如我们在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的， 咱们把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要使用history模式
但是使用history模式还有一个问题就是，在访问二级页面的时候，做刷新操作，会出现404错误，那么就需要和后端人配合让他配置一下apache或是nginx的url重定向，重定向到你的首页路由上就ok啦。路由模式配置：
export default new Router({ // mode: 'history', mode: 'hash', routes })如果是 history模式需要后端配合解决刷新404问题 这里以Node 后台为例:
const Koa = require('koa') const Router = require('koa-router'); const static = require('koa-static') const fs = require('fs'); const app = new Koa(); const router = new Router(); let str; fs.readFile('../dist/index.html', "utf-8", (err, data) => { if (err) { ctx.body = "error found" } str = data.toString(); }) // 解决vue 路由在 history刷新 404情况 router.get('*', async(ctx, next) => { if (ctx.url !== "/index.html") { console.log("在这里返回") ctx.body = str; } }) app.use(static("../dist/")); app.use(router.routes()) //启动路由 app.use(router.allowedMethods()); app.listen(8989, () => { console.log("监听服务器地址：127.0.0.1:8989"); })
-
vue中hash和history的区别
2021-07-03 00:27:49vue的路由分为hash和history模式，他俩最直观的区别就是hash路由有一个 # 号，而history是没有的。还有就是: 1. hash支持低版本的浏览器，而history就没有那么友好了 2. (1) hash模式下，它指 # 号之后的所有... -
15、Vue路由
2022-03-20 16:12:561 、Vue路由简介 1、什么是路由 【生活举例】： 设备和ip的映射关系 接口和服务的映射关系 路径和组件的映射关系 2、路由的优缺点 【优点】： 实现业务场景的切换 整体不刷新页面，用户体验良好 数据传递容易... -
Vue路由
2021-11-01 15:26:23路由概念 路由的本质就是一种对应关系，根据不同的URL请求，返回对应不同的资源。 路由分为：后端路由和前端路由 后端路由：由服务器端进行实现并实现资源映射分发(路由与路由之前切换会刷新页面) 前端路由：... -
vue路由模式及 history 模式下服务端配置
2022-04-28 17:13:55vue 项目中，我们比较常用的模式为 hash 和 history 模式 默认情况下，vue 项目采用的就是 hash 模式 有些人对 history 模式下，为什么需要服务器做相应配置，以及如何配置不甚理解，所以这篇文章就对此做出分析，... -
vue hash模式的缺点。
2017-08-02 14:55:29最近碰到的问题。 1. 回退无法回到本来的状态。或者说不方便。 比如，在一个很长的list中，点击某个item去看详情，回退会回到list的顶端。 2. 无法使用锚点进行定位，与原来的路由冲突。 -
Vue路由使用
2022-03-14 14:32:27Vue中的路由是什么? 路径和组件的映射关系 2.路由-为何用 目标 了解为何要学习和使用路由 讲解 目标: 在一个页面里, 切换业务场景 具体使用示例: 网易云音乐 网易云音乐 单页面应用(SPA): 所有... -
Vue路由和组件库
2022-03-03 18:29:21vue路由 1-什么是路由 --路径与组件之间的关系 2-为什么使用路由---在一个页面中切换业务场景.所有的功能在一个页面上实现,利用路由的功 能实现不切换页面进行局部刷新,实现极高的体验感,开发效率高,数据传递容易,... -
vue 哈希路由（hash模式）和历史路由（history模式）的区别
2022-01-27 10:15:43随着 ajax 的使用越来越广泛，前端的页面逻辑开始变得越来越复杂，特别是spa的兴起，前端路由系统随之开始流行。 从用户的角度看，前端路由主要实现了两个功能（使用ajax更新页面状态的情况下）： 记录当前页面的... -
vue路由的模式 以及原理 区别
2022-04-22 10:25:11⾯试官您好,接下来我给您介绍⼀下 vue 的路由模式,vue 的路由模式⼀共有两种,分别是哈希和 history.他们的区别是 hash 模式不会包含在 http 请求当中,并且 hash 不会重新加载⻚⾯,⽽使⽤ history 模式的话,如果前端... -
Vue路由中的hash和history模式的区别及原理
2021-12-03 16:07:21hash模式 优点 兼容性强，兼容性达到了IE8 除发送ajax和资源请求外不会发送其他多余请求 改变#后的路径、不会自动刷新页面 无需服务端进行配合 缺点 访问路径上包含#,不美观 对于需要锚点功能的需求会与当前... -
vue部署后刷新白屏404？前端路由模式详解（hash和history）
2021-07-12 18:27:26不知道大家有没有遇到过一种情况，当自己的vue部署在服务器上时，一切都如想象办运转，然后脑袋duang的一下，突然想去刷新，然后网页就duang的一下，白屏了。 不出意外的话，我猜你用的一定是history的路由模式。 没... -
Vue-Router路由模式hash和history的区别
2020-07-23 16:23:38在vue-cli->src>router>index.js> new Router({ mode:'history',//这里是模式设置，就这么简单 //如果部署在二级目录，要写默认地址 base:'/二级目录' }) 这就完成了，是不是不相信这么简单 当然不是... -
Vue-路由-原理简介-前端路由-hash-history
2021-04-23 17:32:32先创建一个vue-cli2项目，use vue-router 略… 前端渲染 后端渲染 前端路由 后端路由 后端渲染 jsp: (java server page) = html+css+java代码(动态从数据库读取数据) 服务器端已经渲染好了，网页已经渲染好了，... -
vue路由以及递归
2020-06-11 23:26:15首先来说一下vue递归方法， 对于这个方法的一个简单的理解就是 他可以让复杂的方法简单化。举个简单的运用场景的例子，就是说假如我们做一个树形文件夹，简单点说就是层层嵌套的。那如果我们用for循环来做的话，要写... -
hash和history的区别 vue路由跳转
2019-03-20 10:32:56一、hash 1. 原理：监听onhashchange事件 2. 当url发生变化时，浏览器会记录下来，因此前进后退按钮都可以使用。需要注意的是hash模式下修改的是#后面的内容，使用url...4.缺点：url比较丑，如果传复杂的数据，会... -
vue基础5--vue路由的使用
2021-12-18 22:45:281. vue路由简介和基础使用 1.0 什么是路由 路径和组件的映射关系 1.1 为什么使用路由 单页面应用(SPA): 所有功能在一个html页面上实现 前端路由作用: 实现业务场景切换 优点： 整体不刷新页面，用户体验更好 ... -
vue路由的两种模式
2020-04-25 21:59:03hash与history 对于Vue 这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-router存在的意义。前端路由的核心，就在于——— 改变视图的同时不会向后端发出请求。 一、为了... -
vue-router的两种模式的区别
2020-12-11 14:21:29vue-router默认的是hash模式—使用URL的hash来模拟一个完整的URL,于是当URL改变的时候,页面不会重新加载,也就是单页应用了,当#后面的hash发生变化,不会导致浏览器向服务器发出请求,浏览器不发出请求 -
vue路由介绍
2018-08-12 16:07:47前端路由 服务器端路由：的功能是根据URL地址，跳转到相应页面，这些页面都是真实存在于服务端的 前端路由：由前端实现以上功能，前端只存在d单页面首页index.htm ...缺点 ...前端路由的使用 ...vue-router用... -
vue路由传参【vue路由原理、区别】
2022-04-25 08:57:23vue的路由传值主要通过 query 和 params 来实现 方法1、query query传参就是在url地址后面拼接 ?参数名=参数值 优点：通用性比较好，刷新数据不会丢失 例如 rourer-link to=”/goods?id=1001” this.$router.push({... -
vue路由传参 query传参 param参数传递
2020-08-13 20:44:53路由传参 1、单页面应用 app 所有的内容都在一个html页面上显示，内容的切换用路由去实现 多页面应用 由多个html页面组成，页面的之间的转换由a标签实现跳转 单页面应用和多页面应用的优缺点： ...vue的路由 src -
vue路由相关，路由配置，路由传参，编程式跳转，路由懒加载，路由守卫
2020-12-01 22:44:42location.hash history.pushState({},"","lala") //可以history.back的相关history的操作 history.replaceState({}."","hehe") //替换，不能返回，不能前进 router-link默认在网页生成a标签, tag设置成想要的标签... -
vue路由、单页面应用
2021-07-23 18:10:49vue 中的路由 : 是hash 和 component 的对应关系 , 一个哈希值对应一个组件 单页面应用程序 单页面应用的优缺点： 优点： 1、用户操作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来操作。 2、适合前后端... -
Vue路由的两种模式
2021-03-03 15:50:33后端路由 1、后端渲染：jsp-java server page 后端编写jsp文件代码，包含html+css+java，java代码的作用是从数据库中读取数据，并且将它动态地放在页面中。当浏览器去请求时，后端会返回已经处理好的完整的页面给... -
Vue 路由
2019-10-04 15:10:22路由：路：路径（地址） 由：方向 针对于单页面应用，所提供的一个解决方案。根据地址传递的参数，来决定具体要使用的组件。 1、下载(如果已下载该步可以省略) cnpm install vue-router -S 2、引入 import ...
