对于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. iNeuOS云操作系统,.NET Core全系打造

    iNeuOS云操作系统,.NET Core全系打造 目录 一.演示地址... 2 二.技术体系... 2 三.iNeuOS整体介绍... 2 四.iNeuView概述... 3 五.iNeuView操 ...

  2. Django简单粗暴快速发送邮件!

    >>尽管Python已经提供了相对易用的邮件发送模块 smtplib ,但Django仍对其做了轻度的封装.封装后的模块不仅发送邮件速度快,而且在开发环境下也很容易对邮件发送进行测试, 并 ...

  3. pycharm上传代码到码云(详细)

    如要转载 麻烦请您备注好原文出处!!!!(谢谢合作!) >>首先要去码云注册个账号 提示(尽量使用英文名)创建用户名 使用邮箱登录 >>然后创建库  >填写项目的基础信息 ...

  4. 洛谷—— P1873 砍树

    https://www.luogu.org/problemnew/show/P1873 题目描述 伐木工人米尔科需要砍倒M米长的木材.这是一个对米尔科来说很容易的工作,因为他有一个漂亮的新伐木机,可以 ...

  5. ubuntu网络、包管理、工作内容小结

    中国地图 1.配置IP cat /etc/network/interfaces auto lo iface lo inet loopback # The loopback network interf ...

  6. Objective-C 协议(protocol)二

    我们前面提到了OOP的继承,我们说Objective-C不像C++可以有多重继承,Objective-C是单一继承的,如果想要做到一个类别同时拥有多种型别的能力,我们就可以通过协议来实现.Object ...

  7. 【bootstrap】modal模态框的几种打开方法+问题集锦

    第一部分: 关于bootstrap中modal的使用,下面把几种自己用的打开方法展示出来 首先呢,得有个Bootstrap的页面,这里就不说了. 其次呢,得有个modal放在页面中,不管你这段代码加在 ...

  8. TDDL-剖析淘宝TDDL

    TDDL-剖析淘宝TDDL 学习了:https://blog.csdn.net/sumj7011/article/details/78286741 Taobao Distribute Data Lay ...

  9. PS 基础知识 如何绘制几何图形

    注意:规则的几何图形必须用路径工具,如果使用简单的椭圆工具再描边,则效果是像素堆砌起来的.图像一旦放大就是出现明显的失真.   使用钢笔工具,然后选择路径工具,然后选择需要绘制的图形.   如果需要找 ...

  10. table 设置边框

    本文引自:https://www.cnblogs.com/leona-d/p/6125896.html 示例代码: <!DOCTYPE html> <html lang=" ...