单页面应用路由的实现方式

Posted 2020-10-04

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了单页面应用路由的实现方式相关的知识，希望对你有一定的参考价值。

什么是 SPA?

　　SPA就是单页面应用，即single page application，通过看代码就可以发现，整个网站就只有一个html文件。

WHY SPA?

减小服务器压力。如果不用SPA，那么我们每次切换页面的时候，就会向服务器发送一个请求，服务器返回一个html文件；但是如果使用了SPA，在切换时，不需要请求服务器，只要通过本地的js来切换即可。并且服务器端就不需要配置路由，完全做到了前后端分离，这对于分工合作的意义可想而知。
增强用户体验，增加app的使用流畅性。做过spa的同学都知道，使用spa之后，页面在切换的时候非常流畅，完全没有那种不断刷新的感觉，而是非常快的就有了响应，因为js运行速度很快，所以js在做本地路由的时候，就会非常快。

SPA路由的实现方式有哪些？

　　目前来说，无论是vue，还是react，spa的路由实现方式无非就是以下两者：

hash方式。使用location.hash和hashchange事件实现路由。
history api。使用html5的history api实现，主要就是popState事件等。

　　hash用的还是比较多的，但是这种方式的url会比较丑陋，会出现 #；而history api就可以很好的解决这个问题，但是需要后端配置，并且由于是html5中的api，所以兼容性还不是很好，用的时候需要确定你的用户，再做决定。

SPA路由实现之hash

自己动手，丰衣足食！我们自己来写一个router，也许对齐理解就会更加明白了。一般，我们在使用vue和react的router的时候，不难发现他们都是构造函数，然后生成一个实例，即面向对象的方式。

　　这里当然也需要使用面向对象的方式来实现，这种方式的可扩展性、可维护性都会比较好一些。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>router</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
        }
        div.router-wrap {
            width: 100%;
            height: 100%;
            background: #fefefe;
        }
        a {
            padding: 10px;  
            color: pink;
            font-size: 25px;
            font-weight: bold;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="router-wrap">
        <a href="#/black">黑色</a><br>
        <a href="#/green">绿色</a><br>
        <a href="#/red">红色</a>
    </div>
    <script>
        // 创建Router构造函数
        // currentHash为当前hash值，routes为路径对象
        function Router() {
            this.currentHash = ‘/‘;
            this.routes = {};
        }

        // 注册路径，每个路径对应一个回调函数。 
        Router.prototype.route = function (path, callback) {
            this.routes[path] = callback || function () {
                alert(‘未定义回调函数！‘);
            }
        }

        // 更新页面函数
        Router.prototype.refresh = function () {
            this.currentHash = location.hash.slice(1) || ‘/‘;
            this.routes[this.currentHash]();
        }

        // 初始化
        Router.prototype.init = function () {
            var self = this;
            window.addEventListener(‘load‘, function () {
                self.refresh();
            }, false);  

            window.addEventListener(‘hashchange‘, function () {
                self.refresh();
            });
        }
    </script>

    <script>
        var wrap = document.querySelector(‘.router-wrap‘);

        window.Router = new Router();
        Router.route(‘/‘, function () {
            wrap.style.backgroundColor = ‘#fefefe‘;
        });

        Router.route(‘/black‘, function () {
            wrap.style.backgroundColor = ‘black‘;
        });

        Router.route(‘/green‘, function () {
            wrap.style.backgroundColor = ‘green‘;
        });

        Router.route(‘/red‘, function () {
            wrap.style.backgroundColor = ‘red‘;
        });

        Router.init();

    </script>
</body>
</html>