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 maxlength文本字数限制插件
Apr 16 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
Jun 18 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
vue + vuex todolist的实现示例代码
Mar 09 Javascript
微信小程序实现打卡签到页面
Sep 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购物车实现方法
2015/01/03 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
2014/01/24 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
2015/03/02 Javascript
JavaScript内存管理介绍
2015/03/13 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
AngularJS 过滤器(自带和自建)详解
2016/09/19 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
zTree树形插件异步加载方法详解
2017/06/14 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
复制粘贴功能的Python程序
2008/04/04 Python
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
生物专业个人自荐信范文
2013/11/29 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
运动会稿件50字
2014/02/17 职场文书
英语求职信范文
2014/05/23 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
新课培训心得体会
2014/09/03 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js
Github 使用python对copilot做些简单使用测试
2022/04/14 Python