文档章节

JavaScript实现前端路由

五大三粗
 五大三粗
发布于 2015/08/31 11:40
字数 451
阅读 4122
收藏 2

在单页面应用中,前端通常需要一套路由机制,这样当url发生变化时就可以做出一些处理,从而让页面显示不同的内容。Backbone及Angular里面内置的都有一套路由实现,但有时候可能并不想使用整个框架,只需要路由处理的部分,那么下面就来看一下如何用JavaScript实现前端路由。

html部分:

<div class="container"> <nav class="mainMenu"> <ul> <li><a href="#/">首页</a></li> <li><a href="#/page1">页面1</a></li> <li><a href="#/page2">页面2</a></li> <li><a href="#/page3">页面3</a></li> <li><a href="#/page4">页面4</a></li> </ul> </nav> <div class="content"></div> </div>

这里有几个带#号的锚链接,点击不同的锚链接url里会产生不同的hash,如#/page1、#/page2等,这个值可以通过location.hash获取。

同时,每次hash的变化我们还可以通过onhashchange事件来监听,然后做出相应的处理,下面就来看一下具体的实现:

Router处理的核心代码:

;(function () { function Router () {} Router.prototype.route = function ( path, callback ) { var url = location.hash.slice(1) || '/'; // 刷新时的处理 window.addEventListener('load', function () { if ( url == path ) { callback&&callback(); } }, false); // hash变化时的处理 window.addEventListener('hashchange', function () { url = location.hash.slice(1) || '/'; if ( url == path ) { callback&&callback(); } }, false); }; window.Router = new Router(); })();

Router注册,注册方式就是Router.route(path, callback)的格式:

var content = document.querySelectorAll('.content'); // 测试函数,这里可以放一些ajax处理之类的 function loadContent ( text ) { content[0].innerHTML = text; } // 注意:这里的path要和html里面锚链接对应 // 如:‘#/’对应‘/’, '#/page2'对应'/page2' Router.route('/', function () { loadContent('这是首页'); }); Router.route('/page1', function () { loadContent('这是页面1'); }); Router.route('/page2', function () { loadContent('这是页面2'); }); Router.route('/page3', function () { loadContent('这是页面3'); }); Router.route('/page4', function () { loadContent('这是页面4'); });

Ok,以上就是前端路由的简单实现,另外也可以使用History API来处理。

© 著作权归作者所有

五大三粗
粉丝 163
博文 2293
码字总数 4767276
作品 0
广州
程序员
私信 提问
加载中

评论(2)

村小小
代码都不缩进一下啊,完全无法看
JerryYux
JerryYux
这三行五颜六色的代码怎么展开?
谈谈对bankbonse.js的初步了解

相关下载链接:API:http://documentcloud.github.com/backbone/ bankbonse.js是一个基于就jquery的前端开发库, 是一个MVC模型库。 对于前端的大型项目开发来说,为了实现模块化,降低各个功能...

Noin
2013/03/31
81
0
MV* 框架 与 DOM操作为主 JS库 的案例对比

最近分别使用 Zepto 和 Avalon框架写了个 SPA项目,贴出来讨论下 JS DOM操作为主 JS库 与 MV* 框架的对比 案例(MV* 框架 与 DOM操作 JS库 实例对比) 购物车页面 JS业务逻辑(忽略 Ajax请求...

子凡
09/29
0
0
基于adminlte的后台管理系统开发

前言 现在的大前端技术来势凶猛,Vue&React&Angular三足鼎立,让我们这些后端开发人员瑟瑟发抖。为了开发一个内部使用的管理系统需要去学习Node&Webpack等各种新概念,况且我们的系统并没有那...

gongxufan
2018/06/21
0
0
weex eros框架源码解析

weex eros是基于alibaba weex框架进行二次封装的客户端跨平台开发框架,主要是为前端开发者(可以不用熟悉客户端开发)提供的一站式客户端app开发解决方案。官网地址为:https://bmfe.github...

雅爸学技术
2018/05/27
0
0
原生JavaScript进行前后端同构

什么是前后端同构 明确三个概念:「后端渲染」指传统的 ASP、Java 或 PHP 的渲染机制;「前端渲染」指使用 JS 来渲染页面大部分内容,代表是现在流行的 SPA 单页面应用;「同构渲染」指前后端...

peakedness丶
2018/12/18
529
0

没有更多内容

加载失败,请刷新页面

加载更多

PostgreSQL 11.3 locking

rudi
今天
5
0
Mybatis Plus sql注入器

一、继承AbstractMethod /** * @author beth * @data 2019-10-23 20:39 */public class DeleteAllMethod extends AbstractMethod { @Override public MappedStatement injectMap......

一个yuanbeth
今天
10
1
一次写shell脚本的经历记录——特殊字符惹的祸

本文首发于微信公众号“我的小碗汤”,扫码文末二维码即可关注,欢迎一起交流! redis在容器化的过程中,涉及到纵向扩pod实例cpu、内存以及redis实例的maxmemory值,statefulset管理的pod需要...

码农实战
今天
4
0
为什么阿里巴巴Java开发手册中不建议在循环体中使用+进行字符串拼接?

之前在阅读《阿里巴巴Java开发手册》时,发现有一条是关于循环体中字符串拼接的建议,具体内容如下: 那么我们首先来用例子来看看在循环体中用 + 或者用 StringBuilder 进行字符串拼接的效率...

武培轩
今天
8
0
队列-链式(c/c++实现)

队列是在线性表功能稍作修改形成的,在生活中排队是不能插队的吧,先排队先得到对待,慢来得排在最后面,这样来就形成了”先进先出“的队列。作用就是通过伟大的程序员来实现算法解决现实生活...

白客C
今天
81
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部