上图是我们demo项目的整体结构，我们可以看见在第三级有三个东西router,全局组件，功能组件。其中全局组件和功能组件是脱离于router的，因为这两部分是所有逻辑组件共有的。我们将他提出来，放在App.vue里面而不是放在router下面的路由组件中，是为了只引用一次然后全局调用。

前面两篇都是介绍组织结构和vue-router，从本文开始我们将讲一些如何优雅的用vue编写单页应用。首先我们从登录页面以及开始，因为后续很多其它的页面都需要登录信息。

vue-router主要作用是将路由控制，转移到前端。我们将会在vue-router里面保存一个路由表，在vue中具体通过调用提供的指令或则方法进行跳转。

单页应用，即在一个页面集成系统中所有功能，整个应用只有一个页面。因为路由的控制在前端，单页面应用在页面切换时比传统页面更快，从而在前端体验更好。