对于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的更多相关文章

  1. vue路由的两种模式配置以及history模式下面后端如何配置

    vue路由的两种模式配置以及history模式下面后端如何配置 1.hash ——即地址栏URL中的#符号.hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变has ...

  2. 前端路由的两种模式:hash(#)模式和history模式(转)

    随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...

  3. 前端路由的两种模式: hash 模式和 history 模式

    随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...

  4. vue--前端路由及vue-router两种模式

    前言 路由这个概念最早在后端出现,随后前后端分离,直至当今的单页面应用,路由也在一直发生变化.本文来总结一下路由变化和vue-router中的路由模式区别相关知识点. 正文 1.什么是前端路由 (1) ...

  5. 浅析使用vue-router实现前端路由的两种方式

    关于vue-router 由于最近的项目中一直在使用vue,所以前端路由方案也是使用的官方路由vue-router,之前在angularJS项目中也是用过UI-router,感觉大同小异,不过很显然v ...

  6. 【源码拾遗】从vue-router看前端路由的两种实现

    本文由浅入深观摩vue-router源码是如何通过hash与History interface两种方式实现前端路由,介绍了相关原理,并对比了两种方式的优缺点与注意事项.最后分析了如何实现可以直接从文件 ...

  7. vue-router的两种模式的区别

    众所周知,vue-router有两种模式,hash模式和history模式,这里来谈谈两者的区别. ### hash模式 hash模式背后的原理是`onhashchange`事件,可以在`window ...

  8. vue-router路由加载两种模式

    路由安装npm install --save vue-router 安装完成后,打开package.json,如果看到这个"vue-router": 版本号, 就代表安装成功了   ...

  9. 协议中UART的两种模式 【转】

    转自:http://wjf88223.blog.163.com/blog/static/3516800120104179327286/ ^^…… 协议栈中UART有两种模式:1.中断2.DMA 对于这 ...

随机推荐

  1. jvm类加载的过程

    java类加载过程:加载-->验证-->准备-->解析-->初始化,之后类就可以被使用了.绝大部分情况下是按这 样的顺序来完成类的加载全过程的.但是是有例外的地方,解析也是可以 ...

  2. POJ 3268 Silver Cow Party 最短路

    原题链接:http://poj.org/problem?id=3268 Silver Cow Party Time Limit: 2000MS   Memory Limit: 65536K Total ...

  3. trick点

    1.问题里有取模操作的时候,最后输出(ans+mod)%mod 2.涉及到输出实数0的时候要特判输出的会不是是-0.000000(因为0.00乘一个负的浮点数结果是-0.000000,乘一个正的浮点数 ...

  4. Spring Boot中使用AOP记录请求日志

    这周看别人写的springboot后端代码中有使用AOP记录请求日志,以前没接触过,因此学习下. 一.AOP简介 AOP为Aspect Oriented Programming的缩写,意为:面向切面编 ...

  5. 邁向IT專家成功之路的三十則鐵律 鐵律九:IT人社群互動之道-縮小自己

    身為一位專業的IT人士所要學習的東西實在非常的多,然而對於時間相當有限的我們,最快速的學習方法就是向他人學習,而向他人學習的首要態度就是「縮小自己」.唯有將自己縮小到別人的眼睛裡,才能夠讓他們真心誠意 ...

  6. HDOJ1071

    The area   拿到题的第一想法,又是一道水题,知道P1.P2.P3三点的坐标,就能够确定抛物线的公式.确定抛物线的公式就能够进行积分,然后就没有然后了.纯粹的数学题. #include< ...

  7. SilverLight-DataControls:四、The PagedCollectionView(分页的集合视图) 对象

    ylbtech-SilverLight-DataControls-PagedCollectionView:The PagedCollectionView(分页的集合视图) 对象 1.A, Buildi ...

  8. intent 支持的action 动作

    String ACTION_AIRPLANE_MODE_CHANGED Broadcast Action: The user has switched the phone into or out of ...

  9. G - Specialized Four-Digit Numbers(1.5.2)

    Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit cid=1006#sta ...

  10. MIDI制作的相关软件

    Native Instruments Kontakt(音乐采样器) fl studio 12 v12.5.0.59 汉化版水果   http://xiazai.flstudiochina.com/wm ...