首页 > 代码库 > Javascript实现前端简单路由
Javascript实现前端简单路由
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="keywords" content="javascript" /><meta name="description" content="Helloweba演示平台，演示XHTML、CSS、jquery、PHP案例和示例" /><title>演示：Javascript实现前端简单路由</title><link rel="stylesheet" href=http://www.mamicode.com/"//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><style>.text-right li{padding: 10px}#result{height: 200px; line-height: 200px; font-size: 2rem; text-align: center; color:#fff;}</style></head><body><div class="container"> <div class="row main" style="min-height:500px"> <div class="col-md-12"> <div class="row" style="margin-top:30px"> <div class="col-md-3"> <ul class="text-right"> <li><a href=http://www.mamicode.com/"#/">首页</a></li> <li><a href=http://www.mamicode.com/"#/product">产品</a></li> <li><a href=http://www.mamicode.com/"#/server">服务</a></li> </ul> </div> <div class="col-md-7"> <div id="result"></div> </div> </div> </div> </div></div><script type="text/javascript">function Router(){ this.routes = {}; this.curUrl = ‘‘; this.route = function(path, callback){ this.routes[path] = callback || function(){}; }; this.refresh = function(){ this.curUrl = location.hash.slice(1) || ‘/‘; this.routes[this.curUrl](); }; this.init = function(){ window.addEventListener(‘load‘, this.refresh.bind(this), false); window.addEventListener(‘hashchange‘, this.refresh.bind(this), false); }}var R = new Router();R.init();var res = document.getElementById(‘result‘); R.route(‘/‘, function() { res.style.background = ‘blue‘; res.innerHTML = ‘这是首页‘; }); R.route(‘/product‘, function() { res.style.background = ‘orange‘; res.innerHTML = ‘这是产品页‘; }); R.route(‘/server‘, function() { res.style.background = ‘black‘; res.innerHTML = ‘这是服务页‘; });</script></body></html>
Javascript实现前端简单路由
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。