vue-router两种模式的区别
vue-router两种模式的区别
1.hash模式
vue-router默认的是hash’[hæʃ] '模式,使用URL的hash来模拟一个完整的URL,于是当URL改变的时候,页面不会重新加载,也就是单页面应用了。当#后面的hash发生变化,不会导致浏览器向服务器发出请求,浏览器不会发出请求就不会刷新页面,并且会触发hasChange这个事件,通过监听hash值的变化来实现更新页面部分内容的操作。
对于hash模式会创建hashHistory对象,在访问不同的路由的时候,会发生两件事:
HashHistory.push()将新的路由添加到浏览器访问的历史的栈顶,和HasHistory.replace()替换到当前栈顶的路由。
2.history模式
因为HTML5标准的发布,多了两个API,pushState() 和 replaceState()。通过这两个API
(1)可以改变url地址且不会发送请求。
(2)不仅可以读取历史记录栈,还可以对浏览器历史记录栈进行修改。
除此之外,还有popState(),当浏览器跳转到新的状态时,将触发popState事件。
添加/修改历史状态
包括了pushState
,replaceState
两个方法,这两个方法接收三个参数:stateObj,title,url
// 逐条添加历史记录条目
window.history.pushState(stateObject, title, URL)
// 修改历史记录
window.history.replaceState(stateObject, title, URL)
切换历史记录
包括 back
、forward
、go
三个方法,对应浏览的前进(forward)、后退(back)、跳转(go)操作。
区别:
- 前面的hashChange,你只能通过改变#后面的url片段。而pushState设置的新URL可以是与当前URL同源的任意URL。
- history模式则会将URL修改得就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理,则会返回 404 错误。
当用户刷新页面之类的操作时,浏览器会给服务器发送请求,所以这个实现需要服务器的支持,需要把所有路由都重定向到根页面。
history模式怕啥
不怕前进,不怕后退,就怕刷新,(如果后端没有准备的话),因为刷新是实实在在地去请求服务器的。
在history模式下,你可以自由的修改path。history模式最终的路由都体现在url的pathname中,这部分是会传到服务器端的,因此需要服务端对每一个可能的path值都作相应的映射。
当刷新时,如果服务器中没有相应的响应或者资源,会分分钟刷出一个404来。
vue-router两种模式的区别相关推荐
- vue-router前端路由的两种模式的区别
一.前端路由存在的意义 前端路由主要应用在spa项目中. 核心---在无刷新(不向后端发送请求)的情况下,可以根据不同url更改视图. 二.浏览器提供hash 和history 两种模式支持(可以说, ...
- 蓝牙播放Stereo和Hands-Free AG Audio两种模式的区别?
当使用蓝牙耳机时,发现电脑的播放设备显示了两种模式(如下图所示),Stereo模式下声音正常,而调到Hands-Free AG Audio模式下声音频带窄了很多且音质差,典型的电话音,下面具体说说这两 ...
- Vue-Router前端路由的两种模式、区别、原理?
vue路由有⼏种模式?有什么区别?原理是什么? 一.vue路由有几种模式? 二.两者区别 三.原理 一.vue路由有几种模式? vue的路由模式⼀共有两种,分别是哈希和history 二.两者区别 哈 ...
- hash和history两种模式的区别+SpringBoot的特定配置
今天学习到vue-router有两种模式,一种是hash,一种是history模式 这两种模式对于后端来说有点区别 1,hash模式 这个模式是链接后拼接/#/这样的形式,在实际请求时并不加入#后面的 ...
- vue-router 两种模式的区别
vue-router有两种模式,hash模式和history模式,这里来谈谈两者的区别. **hash模式** hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事 ...
- git merge 的两种模式的区别 --no-ff与fast forward
git merge 将名字为branchName的分支合并到当前分支 有两种模式 git merge <branchName>:fast forward模式,快速合并,看不出做过合并. 不 ...
- vue-router的两种模式的区别
1.大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化h ...
- vue-router的两种模式及区别
为什么要有 hash 和 history? 对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在 ...
- 在IDEA中将项目部署到Tomcat的方法及两种模式的区别
转自:https://www.jianshu.com/p/fb0ed26c35d5 1.添加tomcat服务器 点右上角编辑配置 编辑配置 点击左上角+选择tomcat服务器 添加tomcat 配置t ...
最新文章
- 这个新方法,竟然能检测 Python 代码的好坏!
- session和cache的区别是什么?
- 高性能key-value数据库
- 洛谷 P1063 能量项链 区间dp
- 斯蒂芬斯蒂芬但是当时发生的s
- Confluence 6 CSS 指南:修改顶部背景
- Linux指令:grep指令详解1
- java 生日 计算_java根据生日计算当前年龄,精确到月
- 机器学习入门——线性回归详细分析
- delphi windows编程_他曾创造多门编程语言,还被比尔盖茨以300万美元挖角
- Eclipse离线集成svn插件
- Maven dependencyManagement 详解
- 为什么手机发射功率这么小而基站却能收到信号?
- Qt编写地图综合应用30-世界地图
- div设置半透明效果
- tilte和body标签
- 简单获取apk的签名及shal码
- you-get下载bilibili视频
- 麦田守望者--走出软件作坊:三五个人十来条枪 如何成为开发正规军(四十三)
- TheOpenGroupDPBoK个人认证计划
热门文章
- python抢课程序_一个Python抢课脚本
- 安卓6.0运行时权限处理
- html table的边框线怎么变圆角_CSS偶有所得 - table 边框加圆角踩坑
- ValidationGroup 使用
- 4.4疫情哀悼日当天,主流网站的网页变灰是怎样实现的
- android runtime异常,E / AndroidRuntime:致命错误:主要
- java标识符是什么_Java 标识符
- ChatGPT处理Excel Word PPT
- formatfactory – 免费近全能的多媒体格式转换
- Inno Setup 密码获取器 v0.01 by 风铃夜思雨