【前端路由】

最新推荐文章于 2024-07-23 23:08:01 发布

季诗筱

最新推荐文章于 2024-07-23 23:08:01 发布

阅读量2.5k

点赞数 1

分类专栏：面试总结文章标签：前端路由

本文链接：https://blog.csdn.net/XIAOZHUXMEN/article/details/52073750

版权

面试总结专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

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

1、什么是路由？

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

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

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

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

http://10.0.0.1/
http://10.0.0.1/about
http://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'); 
        });