首页 > 代码库 > 利用JS实现前端路由
利用JS实现前端路由
在以前的web程序中,路由字眼只出现在后台中。但是随着SPA单页面程序的发展,便出现了前端路由一说。单页面顾名思义就是一个网站只有一个html页面,但是点击不同的导航显示不同的内容,对应的url也会发生变化,这就是前端路由做的事。也就是通过JS实时检测url的变化,从而改变显示的内容。
目前很多前端框架都有接口去实现路由,比如vuejs的vue-route等。我们可以利用原生的hashchange事件来模拟一个简单的路由。
实例的html代码:
Document
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-2.2.1.min.js"></script>
- index
- news
- about
this is new page
backthis is about page
back<script type="text/javascript" src="http://www.mamicode.com/js/bundle.js"></script>
实例的javascript代码:
function Router(){ this.routes={}; this.currentURL=‘‘;}Router.prototype.route = function(path,callback){ this.routes[path] = callback || function(){};}Router.prototype.refresh = function(){ this.currentURL = location.hash.slice(1) || ‘/index‘; this.routes[this.currentURL]();}Router.prototype.init = function () { window.addEventListener(‘load‘,this.refresh.bind(this),false); window.addEventListener(‘hashchange‘,this.refresh.bind(this),false);}function display_page(id){ $(".content").eq(id).show().siblings().hide();}window.Router = new Router();Router.route(‘/index‘,function(){ display_page(0);})Router.route(‘/news‘,function(){ display_page(1);})Router.route(‘/about‘,function(){ display_page(2);})window.Router.init();
- Router是一个路由类,类属性routes是一个路由映射对象,currentURL表示当前的URL
- 类函数route表示为对应的url指定视图函数,refresh函数为刷新页面函数
- 为window绑定监听函数,其中主要绑定hashchang,以检测到hash值变了,马上刷新页面。
利用JS实现前端路由
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。