平武建站

JS如何实现前端路由功能的示例分析

这篇文章主要讲解了JS如何实现前端路由功能的示例分析，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

成都创新互联公司，专注为中小企业提供官网建设、营销型网站制作、响应式网站建设、展示型成都网站设计、成都做网站等服务，帮助中小企业通过网站体现价值、有效益。帮助企业快速建站、解决网站建设与网站营销推广问题。

路由就是根据不同的 url 地址展示不同的内容或页面，早期路由的概念是在后端出现的，通过服务器端渲染后返回页面，随着页面越来越复杂，服务器端压力越来越大。后来ajax异步刷新的出现使得前端也可以对url进行管理，此时，前端路由就出现了。

单页面就是有前端路由来实现的，也就是说网站只有一个页面，点击导航会显示不同的内容，对应的url也在发生改变。在这个过程中，js会实时检测url的变化，从而改变显示的内容。

JS如何实现前端路由功能的示例分析

路由实现的原理：window绑定了监听函数，当url的hash值发生变化的时候会触发hashchange回调，在回调中进行不同的操作，马上刷新页面，从而显示不同的页面。

下面是一个前端路由的简单实现：通过路由实现url的切换、页面内容的改变。

index.html




  
  
  
  前端路由测试

router.js

//构造函数
function Router() {
  this.routes = {};
  this.currentUrl = '';
}
Router.prototype.route = function(path, callback) {
  this.routes[path] = callback || function(){};//给不同的hash设置不同的回调函数
};
Router.prototype.refresh = function() {
  console.log(location.hash.slice(1));//获取到相应的hash值
  this.currentUrl = location.hash.slice(1) || '/';//如果存在hash值则获取到，否则设置hash值为/
  // console.log(this.currentUrl);
  if(this.currentUrl&&this.currentUrl!='/'){
    this.routes[this.currentUrl]();//根据当前的hash值来调用相对应的回调函数
  }
 
};
Router.prototype.init = function() {
  window.addEventListener('load', this.refresh.bind(this), false);
  window.addEventListener('hashchange', this.refresh.bind(this), false);
}
//给window对象挂载属性
window.Router = new Router();
window.Router.init();

test.js

Router.route('/one', function () {
  $(".content").html("
路由就是根据不同的 url 地址展示不同的内容或页面，早期路由的概念是在后端出现的，通过服务器端渲染后返回页面，随着页面越来越复杂，服务器端压力越来越大。后来ajax异步刷新的出现使得前端也可以对url进行管理，此时，前端路由就出现了。
");
});
Router.route('/two', function () {
  $(".content").html("
单页面就是有前端路由来实现的，也就是说网站只有一个页面，点击导航会显示不同的内容，对应的url也在发生改变。在这个过程中，js会实时检测url的变化，从而改变显示的内容。
");
});
Router.route('/three', function () {
  $(".content").html("");
});

注意：router.js要在test.js之前进行调用，不然会先加载test.js从而找不到，出现router.js未被定义。

上面router对象实现主要提供了三个方法

1.init监听浏览器url的hash值更新事件。

2.route存储路由更新时的回调到回调数组routes中，回掉函数将负责对页面进行更新。

3.refresh执行当前url的回调函数，更新页面。

看完上述内容，是不是对JS如何实现前端路由功能的示例分析有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。


标题名称：JS如何实现前端路由功能的示例分析
新闻来源：http://pwwzsj.com/article/jgshop.html

其他资讯