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 相关文章推荐
js 加载并解析XML字符串的代码
Dec 13 Javascript
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
JavaScript 学习历程和心得分享
Dec 12 Javascript
js Math 对象的方法
Sep 01 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
微信小程序wx:for循环的实例详解
Oct 07 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
深入理解 ES6中的 Reflect用法
Jul 18 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 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.MVC的模板标签系统(一)
2006/09/05 PHP
php 应用程序安全防范技术研究
2009/09/25 PHP
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
2014/08/20 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
Tensorflow的可视化工具Tensorboard的初步使用详解
2018/02/11 Python
Python实现FLV视频拼接功能
2020/01/21 Python
python多维数组分位数的求取方式
2020/03/03 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
群众路线教育实践活动心得体会
2014/03/07 职场文书
党员目标管理责任书
2014/07/25 职场文书
财务经理岗位职责
2015/01/31 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技