Vue实现简单的多页面

问题描述

Vue对于单页面富应用的程序开发，有着非常友好的支持。简单到只需要通过 “ vue create 项目名称” 这一行命令，即可完成单页面富应用程序的所有环境配置.但多页面的程序呢？

通过vue脚手架vue-cli能帮助开发者快速的进行单页面应用的开发，但vue对于多页面应用的开发，可能就不是这么友好啦，你需要深入到webpack和vue的配置文件中，添加一系列的配置，才能在你原本的单页面应用中创建多个入口文件。详情请百度“vue多页面开发”。

小编查阅网上信息，发现用vue开发多页面应用，即耗时又耗力还不讨好。用vue开发单页面富应用的一大特点就是，第一次加载慢，但多个子页面间的跳转非常丝滑流畅。

如果按网上的方式，通过修改配置文件开发多页面应用，那就不止是第一次打开网页慢，之后的页面跳转速度也将下降。

因为通过配置文件添加多个入口，相当于将多个单页面应用进行整合，多个应用间的跳转，相当于重新加载了新的vue应用。

那如何用简单而又不损耗性能的方式来开发vue多页面应用呢？

解决方案

最简单的方法，就是对项目进行拆分，直接开发多个vue应用，这样就不用写配置文件，但性能损耗的问题还是存在。

那能不能直接在原有的单页面应用中开发多页面应用呢？相信有的读者应该这么干过。来个例子：

2.1 学堂在线网站首页

图2.1不就是vue开发的典型模板吗，通过点击导航栏不断切换网页的内容，但不刷新网页.(该网站并不是vue开发，只是以该网站的样式举例).

2.2 学堂在线课程详情页

图2.2 为点击具体课程后进入的详情页，如果用vue开发这个网站，很明显，首页和详情页是两个应用.需要用到多页面开发或者创建两个vue应用。

那如何通过一个vue应用来开发该网站，并且不用修改复杂的配置文件呢？

最简单的方式是不是换个导航栏就完事了，监听vue实例中的route对象，根据路由的变化显示对应导航栏即可。

但这样会不会引发其他问题呢？来思考一下。

所有子页面在配置路由时，可以用异步加载的方式，用户只有在查看对应子页面时，才会向服务器发送请求，这样再多的子页面也不会影响网页加载的速度。

那主页面呢？相比于以往的单页面应用，主页面中多了一个导航栏。如果用户需要在主页和另一个带有导航栏的页面之间频繁跳转，那么最好的方式就是通过css 中的display 来隐藏其中一个导航栏即可。

如果用户不会在两个页面之间频繁跳转，如何优化呢？

同样的对于未显示的导航栏，采用异步加载的方式，当用户需要看见这个导航栏的时候，再从服务器请求，而不是一开始就加载。这样可以避免第一次加载过多的内容，而导致速度变慢。

同样的，这种方式也可以应用于其它页面内容的开发。