客户端路由

对于客户端(通常为浏览器)来说,路由的映射函数通常是进行一些DOM的显示和隐藏操作。这样,当访问不同的路径的时候,会显示不同的页面组件。客户端路由最常见的有以下两种实现方案:
* 基于Hash
* 基于History API

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

基于Hash的路径有:

http://test.com/
http://test.com/#/foobar

URL中#以及后面的部分都是hash。

const url=require('url')
var a=url.parse('http://test.com/a/b/#/foo/bar')
console.log(a.hash)
// => #/foo/bar

hash仅仅是客户端的一个状态,也就是说,当向服务器发请求的时候,hash部分并不会发过去。

HTML5新添了onhashchange事件给window对象,在Ajax应用中,开发人员通过利用url参数列表保存状态或导航信息。通过监听这个事件,可以实现简单的路由

EventUtil.addHandler(window,"hashchange",(event)=>{
console.log("Old Url: "+event.oldURL+" New Url: "+event.newUrl+" Current hash: "+window.location.hash);
var path=hash.substring(1);//去掉 # 号
})

使用一下代码检测浏览器是否支持hashchange()事件

var isSupported= ("onhashchange" in window)&&
(document.documentMode === undifined || document.documentMode>7);//IE8+才支持

基于History API的路径有:

http://test.com/
http://test.com/foobar

当直接访问http://example.com/的时候,两者的行为是一致的,都是返回了index.html文件。

当从http://example.com/ 跳转到 http://example.com/#/foobar或者http://example.com/foobar的时候,也都是正常的,因为此时已经加载了页面以及脚本文件,所以路由跳转正常。

当直接访问  http://example.com/#/foobar  的时候,实际上向服务器发起的请求是 http://example.com/ ,因此会首先加载页面及脚本文件,接下来脚本执行路由跳转,一切正常。

当直接访问 http://example.com/foobar 的时候,实际上向服务器发起的请求也是 http://example.com/foobar ,然而服务器端只能匹配  / 而无法匹配 /foobar ,因此会出现404错误。
因此需要对服务器路由映射进行改造.

比如,在Express中进行静态路由映射 或者 动态路由映射

app.get('/user',(req,res,next)=>{
// ...do something
});
app.get('/user/:id',(req,res,next)=>{
// ...do something
// var id=req.query.id;
});

基于hash和pushState的网页前端路由实现的更多相关文章

  1. 基于vue-router的移动端网页的路由管理

    本篇代码示例:github 前提:不关注移动端浏览器的前进事件 涵盖功能: 1,管理路由的历史记录 2,切页动画的实现 3,处理流程类页面的回退事件 描述:    流程类页面的回退事件的解释: 以注册 ...

  2. 简单的基于hash和hashchange的前端路由

    hash定义 hash这个玩意是地址栏上#及后面部分,代表网页中的一个位置,#后面部分为位置标识符.页面打开后,会自动滚动到指定位置处. 位置标识符 ,一是使用锚点,比如<a name=&quo ...

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

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

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

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

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

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

  6. 前端路由以及浏览器回退,hash & history & location

    一.前言 其实不止一次想监听浏览器的回退方法,比如 在 list.html 页滚动加载了几页列表,点到 detail.html 看详情,反回来时又得重新加载几页 H5 有背景音乐的,跳页就得重新放,体 ...

  7. 【前端路由】Vue-router 中hash模式和history模式的区别

    咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...

  8. 前端路由hash、history原理及简单的实践下

    阅读目录 一:什么是路由?前端有哪些路由?他们有哪些特性? 二:如何实现简单的hash路由? 三:如何实现简单的history路由? 四:hash和history路由一起实现 回到顶部 一:什么是路由 ...

  9. 前端路由原理之 hash 模式和 history 模式

    什么是路由? 个人理解路由就是浏览器 URL 和页面内容的一种映射关系. 比如你看到我这篇博客,博客的链接是一个 URL,而 URL 对应的就是我这篇博客的网页内容,这二者之间的映射关系就是路由. 其 ...

随机推荐

  1. Team Train Recorder

    2014-2015 Petrozavodsk Winter Training Camp, Contest.58 (Makoto rng_58 Soejima contest) contest link ...

  2. POJ-3686 The Windy's KM算法 拆点题

    参考:https://blog.csdn.net/sr_19930829/article/details/40680053 题意: 有n个订单,m个工厂,第i个订单在第j个工厂生产的时间为t[i][j ...

  3. 牛客20347 SDOI2011计算器(bsgs

    https://ac.nowcoder.com/acm/problem/20347 这篇是为了补bsgs(北上广深算法). 题意: 1.给定y,z,p,计算Y^Z Mod P 的值:  2.给定y,z ...

  4. poj 1511 Invitation Cards(dijstra优化)

    题目链接:http://poj.org/problem?id=1511 题意:给出n个点和n条有向边,求所有点到源点1的来回最短路之和(保证每个点都可以往返源点1) 题目比较简单就是边和点的个数有点多 ...

  5. 基于WFST的语音识别解码器

    学习语音识别有些时间了.老板要求我们基于Kaldi搭一个语音识别系统,在设备上通过MIC讲话,连着设备的PC的console上就能基本实时显示出讲话的内容.由于我们都是小白,刚开始可以要求低些,就用传 ...

  6. Java开发必备工具 ------------工欲善其事,必先利其器

    java企业级开发基本工具 一.开发必备工具 1.Java开发环境 JDK (官网下载即可,需要注册账户) JRE 2.Java企业编码开发工具 IntelliJ IDEA(建议使用Idea,插件使用 ...

  7. java中自定义注解的应用

    要想深刻的理解注解,我们必须能实现自己的注解,然后应用自己的注解去实现特定的业务,使用注解可以更优雅的做到某些事情. 有这样一个场景,在需要文件导出时,我们需要将一个model中的一些重要字段导出到c ...

  8. Day004_Linux基础_基础命令之tar打包解包

    基础命令之 打包,和解包. tar zcvf 打包的参数  tar zcvf /tmp/etc.tar.gz /etc  将/etc/下的文件压缩成一个压缩包 z  通过gzip工具进行压缩 c 表示 ...

  9. 007 Python程序语法元素分析

    目录 一.概述 二.程序的格式框架 2.1 代码高亮 2.2 缩进 2.3 注释 2.4 缩进.注释 三.命名与保留字 3.1 变量 3.2 命名 3.3 保留字 3.4 变量.命名.保留字 四.数据 ...

  10. 4.String、StringBuffer、StringBuilder

    一.String类型 String类型是一个引用类型,但是该类被final修饰,属于最终类,不能派生子类. 字符串一旦初始化就不能再被更改,因为String类中存储内容的char[]数组是也被fina ...