vue路由的两种模式,hash与history
对于Vue 这类渐进式前端开发框架,为了构建SPA(单页面应用),需要引入前端路由系统,这也就是Vue-router存在的意义。前端路由的核心,就在于——— 改变视图的同时不会向后端发出请求。
一、为了达到这个目的,浏览器提供了以下两种支持:
1、hash ——即地址栏URL中的#符号(此hsah 不是密码学里的散列运算)。
比如这个URL:http://www.abc.com/#/hello, hash 的值为#/hello。它的特点在于:hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变hash不会重新加载页面。
2、history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。(需要特定浏览器支持)
这两个方法应用于浏览器的历史记录站,在当前已有的back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改是,虽然改变了当前的URL,但你浏览器不会立即向后端发送请求。
history模式,会出现404 的情况,需要后台配置。
二、404 错误
1、hash模式下,仅hash符号之前的内容会被包含在请求中,如 http://www.abc.com, 因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回404错误;
2、history模式下,前端的url必须和实际向后端发起请求的url 一致,如http://www.abc.com/book/id 。如果后端缺少对/book/id 的路由处理,将返回404错误。
vue路由的两种模式,hash与history的更多相关文章
- vue路由的两种模式配置以及history模式下面后端如何配置
vue路由的两种模式配置以及history模式下面后端如何配置 1.hash ——即地址栏URL中的#符号.hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变has ...
- 前端路由的两种模式:hash(#)模式和history模式(转)
随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...
- 前端路由的两种模式: hash 模式和 history 模式
随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...
- vue--前端路由及vue-router两种模式
前言 路由这个概念最早在后端出现,随后前后端分离,直至当今的单页面应用,路由也在一直发生变化.本文来总结一下路由变化和vue-router中的路由模式区别相关知识点. 正文 1.什么是前端路由 (1) ...
- 浅析使用vue-router实现前端路由的两种方式
关于vue-router 由于最近的项目中一直在使用vue,所以前端路由方案也是使用的官方路由vue-router,之前在angularJS项目中也是用过UI-router,感觉大同小异,不过很显然v ...
- 【源码拾遗】从vue-router看前端路由的两种实现
本文由浅入深观摩vue-router源码是如何通过hash与History interface两种方式实现前端路由,介绍了相关原理,并对比了两种方式的优缺点与注意事项.最后分析了如何实现可以直接从文件 ...
- vue-router的两种模式的区别
众所周知,vue-router有两种模式,hash模式和history模式,这里来谈谈两者的区别. ### hash模式 hash模式背后的原理是`onhashchange`事件,可以在`window ...
- vue-router路由加载两种模式
路由安装npm install --save vue-router 安装完成后,打开package.json,如果看到这个"vue-router": 版本号, 就代表安装成功了 ...
- 协议中UART的两种模式 【转】
转自:http://wjf88223.blog.163.com/blog/static/3516800120104179327286/ ^^…… 协议栈中UART有两种模式:1.中断2.DMA 对于这 ...
随机推荐
- chartcontrol(统计坐标图形控件)
统计图形 把控件拖放到界面会弹出下图 图形共分八系列:Bar Series,Point and line Series,pie Series,Funnel Series,Area Series,Ra ...
- 访问权限修饰符Protected专题
上图描述:A类在a包下,m()方法被protected修饰 上图描述:B类也在a包下,B类是A类的子类. 解析:B类和A类是同包类,B类是A类的子类,因此b对象可以调用m()方法. 上图描述:C类也在 ...
- Java集合——概述
Java集合——概述 摘要:本文主要介绍了几种集合类型以及有关的一些知识点. 集合类图 类图 类图说明 所有集合类都位于java.util包下.Java的集合类主要由两个接口派生而出:Collecti ...
- Objective-C 协议(protocol)二
我们前面提到了OOP的继承,我们说Objective-C不像C++可以有多重继承,Objective-C是单一继承的,如果想要做到一个类别同时拥有多种型别的能力,我们就可以通过协议来实现.Object ...
- MFC office2007风格设置左侧导航栏 [转]
当基础的框架搭好以后,我想为其添加一个左侧导航栏,过程如下:在框架类的头文件添加一个导航栏参数: CMFCOutlookBar m_navigation; 为了完善功能,在导航栏里面我添加了一个CTr ...
- 编译php ./configure命令enable和with有什么区别
原文: https://segmentfault.com/q/1010000009174725 ---------------------------------------------------- ...
- 赵雅智_android_frame动画
在開始实例解说之前,先引用官方文档中的一段话: Frame动画是一系列图片依照一定的顺序展示的过程,和放电影的机制非常相似.我们称为逐帧动画.Frame动画能够被定义在XML文件里,也能够全然编码实现 ...
- C# 将long类型写入二进制文件用bw.Write(num);将其读出用long num= br.ReadInt64();
理由: 因为long类型是 System.Int64 (长整型,占 8 字节,表示 64 位整数,范围大约 -(10 的 19) 次方 到 10 的 19 次方) 而long BinaryReader ...
- 千呼万唤始出来:ArchLinux for Espressobin
前言 原创文章,转载引用务必注明链接,水平有限,如有疏漏,欢迎指正. 本文使用Markdown写成,为获得更好的阅读体验和正常的链接.图片显示,请访问我的博客原文: http://www.cnblog ...
- 翻翻git之---有用的欢迎页开源库 AppIntro
转载请注明出处:王亟亟的大牛之路 今天没有P1.直接进入正题 今天上的是一个帅帅的app滑动介绍页 . 为什么说帅? 作者对自己的内容是这么定义的 Make a cool intro for your ...