-
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-server
hash与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.html
history 模式的优缺点:
优点:
- 符合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 ...