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 对于这 ...
随机推荐
- 常用函数和STL
#include <bits/stdc++.h> using namespace std; #define PI acos(-1.0) int main() { printf(" ...
- "从客户端中检测到有潜在危险的 Request.Form 值"的解决方案汇总
#事故现场 在一个asp.net 的项目中,前端通过ajax将富文本中的文字内容post到服务端的一个ashx中,在ashx中尝试读取参数值时, 结果报错:“从客户端中检测到有潜在危险的 Reques ...
- mysql事务四种隔离级别
事务的基本要素:原子性,一致性,隔离性,持久性. 事务并发问题:脏读,不可重复读,幻读. mysql隔离级别:read-uncommitted,read-committed,repeatable-re ...
- 算法题1+2+...+N
题目:求1+2+-+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字以及条件判断语句(A?B:C). int solve(int n) { int i = 1 ...
- yii框架:CDbConnection failed to open the DB connection: could not find driver的解决的方法
这个问题是由于php中缺少pdo mysql造成的. 解决方法是为php加入此扩展.前往你最早的php安装文件,进入ext/pdo_mysql/文件夹下,然后./configure --with-ph ...
- 如何提高NodeJS程序的运行的稳定性
如何提高NodeJS程序运行的稳定性 我们常通过node app.js方式运行nodejs程序,但总有一些异常或错误导致程序运行停止退出.如何保证node程序的稳定运行? 下面是一些可以考虑的方案: ...
- react webapp 开发小结
1.监听props的方法 componentWillReceiveProps(nextProps) { // } 2.监听state的方法 3.props 传递的方法 <AlarmList {. ...
- odoo生产物流
odoo生产从raw materials location 自动消耗物料,产成品进入到finish productslocation. 而odoo自动产生的MO[manufacture Order], ...
- Terminal emulator
http://en.wikipedia.org/wiki/Terminal_emulator Terminal emulator From Wikipedia, the free encycloped ...
- java基础&&高薪面试
董鹏老师 ,多年经验总结出 [高薪就业必备]之java基础面试题[更新中]: 第01篇 学习Java基础的目的? 第02天 java语言中有没有gotoke ...