大前端开发中的路由管理之一：开篇

一、前言

 从早期的传统（Web）前端到当下的大前端，无论是iOS端还是Android端，路由管理这个概念，一直贯穿在应用（APP）开发的过程里。了解路由管理的形成与发展，可以帮助我们理解应用设计与开发，透析其中的技术原理，对于提升个人开发能力也是大有裨益。

        QQ音乐技术团队（下称“团队”）汇聚了Web、Android、iOS、Flutter等平台的众多优秀人才，更在如MOO音乐、Q音探歌等项目上，进行了非常多的前沿技术实践，对于路由管理这个技术话题也是积累良多。

        围绕页面栈，团队形成了一系列技术文章，对这一话题进行了精炼又不失深度地阐述，并将它们分享给开发者群体，希望能够帮助到更多开发同仁，共同繁荣应用开发。这一系列文章包括：

大前端开发中的路由管理之一：开篇【即本文】

大前端开发中的路由管理之二：Web篇

大前端开发中的路由管理之三：Android篇

大前端开发中的路由管理之四：iOS篇

大前端开发中的路由管理之五：Flutter篇

大前端开发中的路由管理之六：总结篇

        上述六篇文章，我们将会陆续发布，敬请读者保持持续关注，如果对文中内容有异议，可以留言与作者进行沟通。

二、历程

在大前端（包含前端，安卓，iOS）的开发语境里，我们经常会遇到“路由”这个概念。那么，到底什么是路由？

        简单来说，路由就是URL到函数（页面）的映射。通常，我们把看到的一屏的内容叫做是一个页面，一个较复杂的完整应用（非Single-page application），由多个页面组成的。页面的前进后退则由一个栈保存管理，这个栈就叫页面栈。

1. 初始：服务端时代

早期的web开发很多是由后端人员来完成的，比如Web服务器（198.0.0.1）提供了两个页面index.html和about.html，那么我们可以在浏览器分别输入http://198.0.0.1/index.html、http://198.0.0.1/about.html来访问这两个页面。这时的路由指的是一个服务器搜索的功能。

传统页面访问

2. 进化：Ajax的出现

随着Ajax的出现，开发人员可以通过js脚本在浏览器端异步获取数据，再用数据来渲染一个页面，从而实现页面的变化。这样的好处在于，页面的变化不再需要重新打开一个新的浏览器窗口了，页面内容的加载也更流畅，体验更好。

        此时，前端页面便由以前的多个html对应多个页面的模式，变为了一个html加载一个js文件实现页面变化的模式，这种模式便称为SPA(Single-page application 单页面应用)模式。

spa页面访问

3. 转变：前端路由

现代前端框架都发展出了对应的路由实现，如vue-router、react-router。开发者把每个页面的逻辑打包成一个个独立的js模块，web端的路由便转变为对这些模块的映射，浏览器执行不同的模块从而展示不同的页面。前端web开发者从此接过后端人员的使命，开启了一个新的前端web时代。

4. 延伸：大前端新大陆

在广义“路由”的概念下，上面提到的路由只是Web路由，除此之外，还包含原生、跨端应用路由。二者在路由实现方案的主要区别在于，Web路由依托浏览器的导航。而原生、跨端应用需要将页面导航和路由映射一起实现，具体各个端在实现上会有一些差异，不过目标都是一致的，实现一个统一的路由管理中心去处理应用内的页面导航 。

5. 本质：路由管理的目标

上面的文字快速回顾了“路由”的发展历程，在不同的技术时期，它的概念和表现不尽相同，但透过技术演变，我们也看到路由的本质，进而，路由管理的目标也由此得出：

• 实现路由映射，绑定URL/URI和页面
• 实现统一的路由管理中心，维护页面的构建和导航

        至此，我们了解到了路由管理的发展历程以及目标，那么，就请期待我们下一篇文章《大前端开发中的路由管理之二：Web篇》吧，下篇文章将为大家揭秘web端是如何去做路由管理的。

图片来源：

http://www.code2succeed.com/single-page-application/

QQ音乐招聘 Android / iOS 客户端开发，点击左下方“查看原文”投递简历～

也可将简历发送至邮箱：tmezp@tencent.com

文末为大家推荐一个技术号《腾讯音乐天琴实验室》，TME天琴实验室致力于对业内前沿科技如AI等方向进行相关研发，持续推出新技术提升TME旗下QQ音乐等平台的音乐视听体验，对音视频相关AI研发感兴趣的同仁们一起交流学习起来吧！！！

↓ ↓   ↓