前端Node Express Vue
Q：什么是单页面富应用（SPA）和前端路由？
A：
1. 单页面富应用（即Single Page Web Application，以下简称SPA）应该是最近几年火起来的，尤其是在Angular 框架诞生之后，喝多SPA 的网站以及基于Electron 和Ionic 的桌面App 和移动App 层出不穷。
2. SPA 的核心即是前端路由。何为路由呢？说的通俗点就是网址，比如github.com/JobbyM/vue-learning；专业点就是每次GET 或POST 等请求，在服务端有一个专门的正则配置列表，然后匹配到具体的一条路径后，分发给不同的Controller，然后进行各种操作后，最终将html 或数据返回给前端，这就完成了一次IO。在Node.js 出现后，这种现象有了改善，就是所谓的大前端，得益于Node.js 和JavaScript 的语言特性，html 模版可以完全由前端来控制，同步或异步渲染完全由前端决定，并且由前端维护一套模块，这就是为什么在服务端使用artTemplate、React以及即将推出的Vue2.0 原因了。那说了这么多，到底怎样算是SPA 呢，其实就是在前后端分离的基础上，加上一层前端路由。
3.前端路由，即由前端来维护一个路由规则。实现有两种，一种是利用url 的hash，就是常说的锚点（#），JS 通过hashChange 事件来监听url 的改变，IE7 及以下需要轮询；另一种就是HTML5 的History 模式，它使url 看起来像普通网站那样，以“/”分割，没有#，但页面并没有跳转，不过使用这种模式需要服务端支持，服务端在接受到所有的请求后，都指向同一个html 文件，不然会出现404。所以，SPA 只有一个html，整个完整所有的内容都在这一个html 里，通过js 来处理。
4. 开发一个前端路由，主要考虑到页面的可插拔、页面的声明周期、内存管理等。
以下内容的原文链接 https://segmentfault.com/a/1190000011967786
什么是路由
路由这个概念最先是后端出现的。在以前用模板引擎开发页面时，经常会看到这样
http://hometown.xxx.edu.cn/bbs/forum.php
有时还会有带.asp或.html的路径，这就是所谓的SSR(Server Side Render)，通过服务端渲染，直接返回页面。
有了 Ajax 后，用户交互就不用每次都刷新页面，体验带来了极大的提升。
但真正让这项技术发扬光大的，(｡･∀･)ﾉﾞ还是后来的 Google Map，它的出现向人们展现了 Ajax 的真正魅力，释放了众多开发人员的想象力，让其不仅仅局限于简单的数据和页面交互，为后来异步交互体验方式的繁荣发展带来了根基。
而异步交互体验的更高级版本就是 SPA（那么问个问题，异步交互最高级的体验是什么？会在文末揭晓）—— 单页应用。单页应用不仅仅是在页面交互是无刷新的，连页面跳转都是无刷新的，为了实现单页应用，所以就有了前端路由。
从 vue-router 来看前端路由实现原理
前端路由的实现其实很简单。
本质上就是检测 url 的变化，截获 url 地址，然后解析来匹配路由规则。
但是这样有人就会问：url 每次变化都会刷新页面啊？页面都刷新了，JavaScript 怎么检测和截获 url？
在 2014 年之前，大家是通过 hash 来实现路由，url hash 就是类似于
https://segmentfault.com/a/1190000011956628#articleHeader2
这种 #。后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。另外每次 hash 值的变化，还会触发 hashchange 这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。
14年后，因为HTML5标准发布。多了两个 API，pushState 和 replaceState，通过这两个 API 可以改变 url 地址且不会发送请求。同时还有 onpopstate 事件。通过这些就能用另一种方式来实现前端路由了，但原理都是跟 hash 实现相同的。用了 HTML5 的实现，单页路由的 url 就不会多出一个#，变得更加美观。但因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。
14html
vue-router配置history模式
官方文档：https://router.vuejs.org/zh-cn/essentials/history-mode.html
要在router的配置中加上
export default new Router({
mode: 'history',
base: '/hot/', //加上这一行
用浏览器打开http://www.xxx.com/hot/
一切运行正常，点击各种链接也能出来，但是由于我启用了history模式，我直接在浏览里访问 http://www.xxx.com/hot/item/1 这样的url是又404了，为什么 我可以在首页通过点击进入 http://www.xxx.com/hot/item/1 这个页面，但是直接访问又不行呢，
因为在history 模式下，只是动态的通过js 操作window.history 来改变有浏览器地址栏里的路径，并没有发起http请求，但当你直接 在浏览器里输入这个地址的时候 就一定要先对服务器放起http请求，但是这个目标在服务器上又不存在所以就返回了404了，怎么解决呢，就是把所有的请求全部转发到http://www.xxx.com/hot/index.hmtl上就可以了(具体部署 参考 https://segmentfault.com/q/1010000012311024)
apache、node.js、nginx、tomcat关系？
是一类东西，又不是一类东西。
首先他们都能创建 Web 服务器，但是他们关注的点不一样。
Tomcat 最好跟 Java 配合，Apache 通常跟 PHP 配合，但也不排除能跟 Node.js 配合反向代理。
跟 Node.js 关系最好的还算是 Nginx。当然你在你的服务器上直勾勾挂个 Node.js 监听 80 端口对外也不是不可以。但是通常真正线上（个人玩具除外）的做法是，Node.js 监听本地的某个端口，然后前面挂个 Nginx 监听 80 端口反向代理到 Node.js 上。
至于为什么要这么做，比如你有 3 台服务器，每个服务器上启一个 Node.js 作为集群的一个节点，然后再在前面挡一层负载均衡，反向代理到集群的 3 台服务器上。
所以实际上不仅仅是 Node.js，这是一种语言无关的做法。所以他们都能拿来做 Web 服务器，只不过关注的点不一样而已——Node.js 更倾向于业务逻辑
