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 相关文章推荐
JSON JQUERY模板实现说明
Jul 03 Javascript
面向对象Javascript核心支持代码分享
May 23 Javascript
JavaScript判断DOM何时加载完毕的技巧
Nov 11 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
angularjs http与后台交互的实现示例
Dec 21 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 Javascript
vue实现图片按比例缩放问题操作
Aug 11 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 Javascript
JS实现简易日历效果
Jan 25 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 is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
jQuery TextBox自动完成条
2009/07/22 Javascript
用js做一个小游戏平台 (一)
2009/12/29 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
python集合的新增元素方法整理
2020/12/07 Python
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
新闻编辑自荐信
2013/11/03 职场文书
社会实践感言
2014/01/25 职场文书
总经理助理职责
2014/02/04 职场文书
一年级班主任感言
2014/03/08 职场文书
售后服务承诺书模板
2014/05/21 职场文书
文明礼仪标语
2014/06/13 职场文书
2016年十一促销广告语
2016/01/28 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书