vue-router的两种模式的区别


Posted in Javascript onMay 30, 2019

1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容

优点: 良好的交互体验,用户不需要刷新页面,页面显示流畅, 良好的前后端工作分离模式,减轻服务器压力,
缺点: 不利于SEO,初次加载耗时比较多

2、hash模式

vue-router默认的是hash模式—使用URL的hash来模拟一个完整的URL,于是当URL改变的时候,页面不会重新加载,也就是单页应用了,当#后面的hash发生变化,不会导致浏览器向服务器发出请求,浏览器不发出请求就不会刷新页面,并且会触发hasChange这个事件,通过监听hash值的变化来实现更新页面部分内容的操作

对于hash模式会创建hashHistory对象,在访问不同的路由的时候,会发生两件事:
HashHistory.push()将新的路由添加到浏览器访问的历史的栈顶,和HasHistory.replace()替换到当前栈顶的路由

vue-router的两种模式的区别

vue-router的两种模式的区别

3、history模式

主要使用HTML5的pushState()和replaceState()这两个api来实现的,pushState()可以改变url地址且不会发送请求,replaceState()可以读取历史记录栈,还可以对浏览器记录进行修改

window.history.pushState(stateObject, title, URL)
 window.history.replaceState(stateObject, title, URL)

包括back,forward , go 三个方法

history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进

区别:

前面的hashchange,你只能改变#后面的url片段。而pushState设置的新URL可以是与当前URL同源的任意URL。
history模式则会将URL修改得就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理,则会返回404错误

总结

以上所述是小编给大家介绍的vue-router的两种模式的区别,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery 可以拖动的div实现代码 脚本之家修正版
Jun 26 Javascript
js判断IE浏览器版本过低示例代码
Nov 22 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
JS简单随机数生成方法
Sep 05 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
讲解vue-router之什么是嵌套路由
May 28 Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 Javascript
详解node.js 事件循环
Jul 22 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 #Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 #Javascript
全面分析JavaScript 继承
May 30 #Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 #Javascript
vue组件三大核心概念图文详解
May 30 #Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 30 #Javascript
基于iview的router常用控制方式
May 30 #Javascript
You might like
php在线代理转向代码
2012/05/05 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
Laravel 4 初级教程之Pages、表单验证
2014/10/30 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
详解AngularJS中的依赖注入机制
2015/06/17 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
2017/01/13 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
node文件上传功能简易实现代码
2017/06/16 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
Python重新引入被覆盖的自带function
2014/07/16 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
python查看模块,对象的函数方法
2018/10/16 Python
python实现代码统计器
2019/09/19 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
医学院毕业生自荐信范文
2014/03/06 职场文书
小组口号大全
2014/06/09 职场文书
质量提升方案
2014/06/16 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
解约证明模板
2015/06/19 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书