【前端路由】

来源：互联网发布：圆方铺砖软件破解版编辑：程序博客网时间：2024/04/28 10:25

查缺补漏，之前对于路由真的不太了解，今天算是恶补吧。内推阶段就是要发现自己的不足，然后赶紧查缺补漏，加油！

在单页面应用中，前端通常需要一套路由机制，这样当url发生变化时就可以做
出一些处理，从而让页面显示不同的内容。

1、什么是路由？

对于没有开发过后端，也没有开发过 SPA 的前端来说，路由这个名词可能会让人比较困惑，这里的路由并不是指「硬件路由」，也不是网络七层协议中的「网络层路由」，但是其思想原理是一样的：

从性能和用户体验的层面来说，后端路由每次访问一个新的页面都要向服务器发送请求，然后服务器再响应请求，这个过程会有延迟的
，而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有网络延迟。

无论是前端还是后端，我们看到的URL其实都是马甲，需要通过路由触发/执行真实需要执行的逻辑路径。

比如，服务器网络地址为 10.0.0.1,而该Web服务器又提供了三个可供用户访问的页面，其页面URI分别是：

http://10.0.0.1/http://10.0.0.1/abouthttp://10.0.0.1/concat

上述URI的路径就分别是

//about/concat

当用户使用http://10.0.0.1/about 来访问页面时，服务器会接收到这个请求，然后会解析URI中的路径，该路径对应着相应的处理逻辑，程序会把请求交给路径所对应的处理逻辑，这样就完成了一次路由分发，这个分发就是通过路由实现的。

2、前端路由

下面说一下实现的简要原理

以hash形式为例，当url的hash发生变化时，会触发hashchange注册的回调函数，回调函数中去进行不同的操作，进行不同的内容显示。具体代码如下：

//闭包形成块级作用域    (function () {             function Router () {} //Router构造函数            //在原型中定义方法，为不同的path指定不同的回调函数            Router.prototype.route = function ( path, callback ) {                 var url = location.hash.slice(1) || '/';  //获取当前hash值                // 刷新时的处理                 window.addEventListener('load', function () {                     if ( url == path ) {                         callback();                     }                 }, false);                 // hash变化时的处理                 window.addEventListener('hashchange', function () {                     url = location.hash.slice(1) || '/';                     if ( url == path ) {                         callback();                     }                 }, false);             };             window.Router = new Router(); //创建Router对象作为window对象的属性        })();

Router的使用如下：
HTML结构：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>单页面的路由</title></head><body>    <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></body></html>

Router的使用：

        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');         });

完整代码可从github下载，这里只是简单的例子，我还要具体的学习React Router，所以博客还会继续更新。

参考博文：
从React Router谈谈前端路由的那些事
前端路由实现与 react-router 源码分析

1 0