对于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. 51nod 1088 最长回文子串 【中心拓展法/输出长度和路径】

    1088 最长回文子串 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 回文串是指aba.abba.cccbccc.aaaa这种左右对称的字符串. 输入一个字 ...

  2. 编译lua

    http://www.lua.org/ 新建一个 static library 工程,把解压得到的目录下的src子目录中的所有.h和.c文件拷贝到新工程目录下. 工程中删除自动生成的 main.c 文 ...

  3. [置顶] Android 应用内禁止截屏功能的实现

    截图介绍   Android的调试工具DDMS提供有截屏功能,很多软件也会有截屏功能,在做支付等安全类应用的时候,为了保证用户的资产和系统安全,往往会禁止应用内截屏,禁止之后,在此应用处于前台的情况下 ...

  4. 更新tensorflow支持GPU时出错

    sudo pip install --upgrade tensorflow-gpu Operation not permitted: '/tmp/pip-Sx_vMg-uninstall/System ...

  5. [转] RabbitMQ介绍

    转自: http://lynnkong.iteye.com/blog/1699684 1      什么是RabbitMQ? RabbitMQ是实现AMQP(高级消息队列协议)的消息中间件的一种,最初 ...

  6. 【POJ 3026】Borg Maze

    id=3026">[POJ 3026]Borg Maze 一个考察队搜索alien 这个考察队能够无限切割 问搜索到全部alien所须要的总步数 即求一个无向图 包括全部的点而且总权值 ...

  7. NATSserver配置具体解释

    NATSserver配置具体解释 作者:chszs,未经博主同意不得转载. 经许可的转载需注明作者和博客主页:http://blog.csdn.net/chszs 虽然NATS能够无配置的执行,但也能 ...

  8. c++ 操作Mysql ado

    #pragma once #ifndef DB_MYSQL_H #define DB_MYSQL_H   #include "stdafx.h" #include <wins ...

  9. Azure Mobile App - Custom Authentication

    Custom Authentication: 1. For OLD Mobile Service - https://azure.microsoft.com/en-us/documentation/a ...

  10. icmp的程序(ping的实现)

    code来源于<网络编程与分层协议设计> chap7 ICMP协议程序设计 ----没有理解,没有编译,只是敲了出来 ping.h #define ICMP_ECHOREPLY 0#def ...