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 相关文章推荐
网页加载时页面显示进度条加载完成之后显示网页内容
Dec 23 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
Sep 03 Javascript
js中生成map对象的方法
Jan 09 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
JS实现兼容性较好的随屏滚动效果
Nov 09 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
Vue.js基础知识汇总
Apr 27 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
详解微信JS-SDK选择图片遇到的坑
Aug 15 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
Jan 21 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中的多种加密技术及代码示例解析
2016/10/20 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
Javascript将string类型转换int类型
2010/12/09 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
vue实现城市列表选择功能
2018/07/16 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
Python getopt模块处理命令行选项实例
2014/05/13 Python
解读Python编程中的命名空间与作用域
2015/10/16 Python
Python pass详细介绍及实例代码
2016/11/24 Python
python修改txt文件中的某一项方法
2018/12/29 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
python 常见的反爬虫策略
2020/09/27 Python
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
25道Java面试题集合
2013/05/21 面试题
2014年情人节活动方案
2014/02/16 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
任长霞观后感
2015/06/16 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书