路由观察浏览器的URL的变更。当URL 变更时,路由会解析它并生成一个新的路由实例。

一个基本的路由是这样的:

class Router {
private _defaultController: string;
private _defaultAction: string; constructor(defaultController: string, defaultAction: string) {
this._defaultController = defaultController || "home";
this._defaultAction = defaultAction || "index";
} public initialize() {
$(window).on('hashchange', ()=> {
var r = this.getRoute();
this.onRouteChange(r);
})
} // 读取URL
private getRoute() {
var h = window.location.hash;
return this.parseRoute(h);
} // 解析URL
private parseRoute(hash: string) {
var comp, controller, action, args, i;
if(hash[hash.length - 1] === "/") {
hash = hash.substring(0, hash.length - 1);
}
comp = hash.replace("#", '').split('/');
controller = comp[0] || this._defaultController;
action = comp[1] || this._defaultAction; args = [];
for (i = 2; i < comp.length; i++) {
args.push(comp[i]);
}
return new Route(controller, action, args);
} private onRouteChange(route: Route) {
// 在此处执行控制器
}
}

上面这个类使用默认controller和默认方法的名字作为它的构造函数的参数。当没有参数被传入时,home和index作为默认controller名和默认方法名。

initialize方法被用来创建hashchange事件的监听。浏览器会在window.location.hash变更的时候触发这个事件。比如,当前页面的URL是http:localhost:8080,当用户点击了下面的链接<a href="#tasks/index">点我</a>,window.location.hash的值会变成“/task/index”。浏览器地址栏中的地址会变更,但hash字符会阻止浏览器重载当前页面。随后路由会使用parseRoute调用getRoute方法将URL转变成一个新的Route类实例。

URL遵循下面的命名规范:

#controllerName/actionName/arg1/arg2/arg3/argN

这意味着task/index URL 会被转换成:

new Route(“task”, “index”, []);

Route类的实例被传入onRouteChange()方法中,它将负责调用处理这个路由的controller

浅看spa单页应用路由的更多相关文章

  1. 前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS)

    前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS) 一.百度统计的代码: UV PV 统计方式可能存在问题 在 SPA 的前端项目中 数据统计,往往就是一个比较麻烦的事情,Re ...

  2. [vue]spa单页开发及vue-router基础

    - 了解spa页面跳转方式:(2种) spa: 单页跳转方式 开发(hash模式): https://www.baidu.com/#2313213 生产(h5利于seo): history.pushS ...

  3. Javascript 与 SPA单页Web富应用

    书单推荐 # <单页Web应用:JavaScript从前端到后端> http://download.csdn.net/detail/epubitbook/8720475 # <MVC ...

  4. 【读书笔记】WebApi 和 SPA(单页应用)--knockout的使用

    Web API从MVC4开始出现,可以服务于Asp.Net下的任何web应用,本文将介绍Web api在单页应用中的使用.什么是单页应用?Single-Page Application最常用的定义:一 ...

  5. js单页hash路由原理与应用实战

    什么是路由? 通俗点说,就是不同的URL显示不同的内容 什么是单页应用? 单页,英文缩写为SPA( Single Page Application),就是把各种功能坐在一个页面内. 那所谓的单页路由应 ...

  6. 大熊君学习html5系列之------History API(SPA单页应用的必备)

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  7. 基于VUE的SPA单页应用开发-加载性能篇

    1.基于异步数据的vue页面刷新 先看看基于异步数据的vue页面刷新后,都发生了啥- 如图所示: 图1 基于异步数据的vue页面刷新 网络请求图 步骤如下: step1:请求页面: step2:请求页 ...

  8. 单页vue路由router

    Vue.js + vue-router 可以很简单的实现单页应用. <router-link> 是一个组件,该组件用于设置一个导航链接,切换不同 HTML 内容. to 属性为目标地址, ...

  9. 前端学习之路之SPA(单页应用)设计原理

    SPA设计 1.设计意义 前后端分离 减轻服务器压力 增强用户体验 Prerender预渲染优化SEO 前后端分离:前端做业务逻辑,后端处理数据和接口,耦合度减少,开发效率提高. 减轻服务器压力:一个 ...

随机推荐

  1. Apache Flink目录遍历(CVE-2020-17519)

    1.漏洞描述 2021年1月5日,Apache Flink官方发布安全更新,修复了由蚂蚁安全非攻实验室发现提交的2个高危漏洞,漏洞之一就是Apache Flink目录遍历漏洞(CVE-2020-175 ...

  2. QT. 学习之路 二

    Qt 的信号槽机制并不仅仅是使用系统提供的那部分,还会允许我们自己设计自己的信号和槽. 举报纸和订阅者的例子:有一个报纸类 Newspaper,有一个订阅者类 Subscriber.Subscribe ...

  3. XDFZOI 月赛 201905 Sliver

    组题人自己组完过后,才发现自己还是太弱了... T1 简单模拟. 按照游戏规则直接模拟显然是不明智的,所以我们可以像石头剪刀布一样,将判断改变为检验. 同时,我们发现,一共只有48种牌,所以我们可以直 ...

  4. chage 修改用户密码时间限制

    chage [options] LOGIN chage针对用户的密码过期时间.过期提前多少天警示等功能实现,passwd也可以实现,但是passwd --expire参数是直接用户密码过期,强制用户下 ...

  5. mysql 修改my.ini

    1.C:\Program Files\MySQL\MySQL Server 5.5\bin>mysqladmin shutdown可能提示:localhost不能启动mysql2.C:\Prog ...

  6. 论文阅读:Robust Visual SLAM with Point and Line Features

    本文提出了使用异构点线特征的slam系统,继承了ORB-SLAM,包括双目匹配.帧追踪.局部地图.回环检测以及基于点线的BA.使用最少的参数对线特征采用标准正交表示,推导了线特征重投影误差的雅克比矩阵 ...

  7. c# checkedListBox设置多列横向显示 经验总结

    1. 设置checkedListBox的MultiColumn 属性为true; 2. 调整checkedListBox的宽度,调整ColumnWidth的宽度

  8. 【排序+模拟】谁拿了最多奖学金 luogu-1051

    题目描述 某校的惯例是在每学期的期末考试之后发放奖学金.发放的奖学金共有五种,获取的条件各自不同: 院士奖学金,每人$ 8000 $元,期末平均成绩高于\(80\)分(\(>80\)),并且在本 ...

  9. kafka单机环境配置以及基本操作

    安装地址(已亲测有效):https://www.linuxidc.com/Linux/2019-03/157650.htm

  10. Skywalking-03:Skywalking本地调试

    live-demo 与 skywalking 源码联调 构建项目 找一个目录执行如下命令 git clone https://github.com/apache/skywalking.git # cl ...