前后端路由,单页面应用以及vue-router两种模式

前后端分离 ===> 利用Ajax，可以在不刷新浏览器的情况下异步数据请求交互。

单页应用（只有一个html文件，整个网站的所有内容都在这一个html里，通过js来处理）不仅仅是在页面交互是无刷新的，连页面跳转都是无刷新的。为了实现单页应用 ==> 前后端分离 + 前端路由。（更新视图但不重新请求页面）

前端路由实现起来其实也很简单，就是匹配不同的 url 路径，进行解析，加载不同的组件，然后动态的渲染出区域 html 内容。

早期的后端路由

前端路由

单页面应用:

单页Web应用（single page web application，SPA）： SPA 是一种特殊的 Web 应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。一旦页面加载完成， SPA 不会因为用户的操作而进行页面的重新加载或跳转，而是利用 JavaScript 动态的变换 HTML（采用的是 div 切换显示和隐藏），从而实现UI与用户的交互。在 SPA 应用中，应用加载之后就不会再有整页刷新。相反，展示逻辑预先加载，并有赖于内容Region（区域）中的视图切换来展示内容。

!!更新视图但不重新请求页面

1. 优点

1) 有良好的交互体验

能提升页面切换体验，用户在访问应用页面是不会频繁的去切换浏览页面，从而避免了页面的重新加载；

2) 前后端分离开发

单页Web应用可以和 RESTful 规约一起使用，通过 REST API 提供接口数据，并使用 Ajax 异步获取，这样有助于分离客户端和服务器端工作。更进一步，可以在客户端也可以分解为静态页面和页面交互两个部分；

3) 减轻服务器压力

服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；

4) 共用一套后端程序代码

不用修改后端程序代码就可以同时用于 Web 界面、手机、平板等多种客户端；

2. 缺点：

1) SEO难度较高

由于所有的内容都在一个页面中动态替换显示，所以在SEO上其有着天然的弱势，所以如果你的站点对SEO很看重，且要用单页应用，那么就做些静态页面给搜索引擎用吧；

2) 前进、后退管理

由于单页Web应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理，当然此问题也有解决方案，比如利用URI中的散列+iframe实现；

3) 初次加载耗时多

为实现单页Web应用功能及显示效果，需要在加载页面的时候将JavaScript、CSS统一加载，部分页面可以在需要的时候加载。所以必须对JavaScript及CSS代码进行合并压缩处理；

3. 性能优化

1) 加载优化
在SPA中，通常一开始就会加载所有必需的代码（HTML，JavaScript和CSS），有时候考虑到首屏加载太慢会按需加载，按需加载就是按照当前呈现的不同页面加载不同的文件，而不是最开始就把所有文件都加载出来，从而避免首屏加载很慢。
当首屏加载完毕后，设备&网络处于空闲状态，可以对其他路由组件进行预加载，以便提升页面切换性能。
根据路由拆分减少初始加载体积,利用异步加载方式，在路由注册时提供异步拉取组件的方法，仅在需要进入对应路由时，对应组件才会被加载进来。

初次加载的速度
单页应用的第一页加载会比基于服务器的应用慢。这是因为首次加载必须先拿到框架和应用程序的代码，再在浏览器中呈现所需的视图。基于服务器的应用程序只需将所需的HTML推送到浏览器，从而减少了延迟和下载用时。

加快页面加载速度
有一些方法可以加快单页应用的初次加载速度，比如采用多项缓存措施、需要时再加载某些模块（懒加载）。

页面生命周期
单页应用在初始页面加载时被完全加载，然后页面区域被替换或更新为按需从服务器加载的新页面片段。为避免过度下载未使用的功能，单页应用通常会逐渐下载更多内容，如所需要的功能、页面的一小块，或者完整的一页。

2) SEO优化

(所以说之前的后端路由SEO就相比前端路由好很多)

**由于我们在处理单页应用的时候页面是不刷新的，所以会导致我们的网页记录和内容很难被搜索引擎抓取到。**搜索引擎抓取页面首先要遵循http协议，可是#不是协议内的内容。而实际上也是这样，我们没有见过搜索引擎的搜索结果中，哪一条记录可以快速定位到网页内的某个位置的。解决的方法是用 #!号代替#号，因为谷歌会抓取带有#!的URL。（Google规定，如果你希望Ajax生成的内容被浏览引擎读取，那么URL中可以使用"#!"(这种URL在一般页面一般不会产生定位效果)），这样我们可以解决ajax的不被搜索引擎抓取的问题。在vueJs里面，我们可以看到作者就是这样做的。

3) 前进后退功能优化

配置好路由信息，通过记录浏览过的历史路由信息，可以很好的记录或历史查看过的界面，也可以独立写个足迹功能实现。

vue-router两种模式

hash模式

#后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。每次 hash 值的变化，会触发hashchange 这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听hashchange来实现更新页面部分内容的操作：
hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件:

当你选择mode类型之后，程序会根据你选择的mode 类型创建不同的history对象(hash:HashHistory 或 history:HTML5History 或 abstract:AbstractHistory)

HashHistory是浏览器的一个history对象

HashHistory有两个方法：HashHistory.push()将新路由添加到浏览器访问历史的栈顶 和 HashHistory.replace()替换掉当前栈顶的路由


因为hash发生变化的url都会被浏览器记录（历史访问栈）下来，从而你会发现浏览器的前进后退都可以用了。这样一来，尽管浏览器没有请求服务器，但是页面状态和url一一关联起来。

history模式

因为HTML5标准发布，多了两个 API，pushState() 和 replaceState()。通过这两个 API （1）可以改变 url 地址且不会发送请求，（2）不仅可以读取历史记录栈，还可以对浏览器历史记录栈进行修改。

除此之外，还有popState().当浏览器跳转到新的状态时，将触发popState事件.

修改历史状态

包括了pushState,replaceState两个方法,这两个方法接收三个参数:stateObj,title,url

切换历史状态

包括back,forward,go三个方法，对应浏览器的前进forward，后退back，跳转go操作。 有同学说了，(谷歌)浏览器只有前进和后退，没有跳转，嗯，在前进后退上长按鼠标，会出来所有当前窗口的历史记录，从而可以跳转(也许叫跳更合适)：

区别：

1.前面的hashchange，你只能改变#后面的url片段。而pushState设置的新URL可以是与当前URL同源的任意URL。
2.history模式则会将URL修改得就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理，则会返回404错误

当用户刷新页面之类的操作时，浏览器会给服务器发送请求，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。

history模式怕啥

不怕前进，不怕后退，就怕刷新，（如果后端没有准备的话）,因为刷新是实实在在地去请求服务器的。

在history模式下，你可以自由的修改path。history模式最终的路由都体现在url的pathname中，这部分是会传到服务器端的，因此需要服务端对每一个可能的path值都作相应的映射。
当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来。

共同点是:**他们实质上都是修改location的href属性!!**但是为什么不刷新呢,因为两者改变的都是同一个链接后面的url;hash只是改变#后面,history也是要在同域名下(同源)

(直接调用和修改不一样!!!)

.Vue-router跳转和location.href有什么区别

1.使用location.href=’/url’来跳转，简单方便，但是刷新了页面；
2.使用history.pushState(’/url’)，无刷新页面，静态跳转；
3.引进router，然后使用router.push(’/url’)来跳转，使用了diff算法，实现了按需加载，减少了dom的消耗。
4.其实使用router跳转和使用history.pushState()没什么差别的，因为vue-router就是用了history.pushState()，尤其是在history模式下。

参考链接:https://www.cnblogs.com/georgexu/p/14045750.html
参考链接:https://blog.csdn.net/qq_39077561/article/details/90448949
参考链接:https://blog.csdn.net/cmzhuang/article/details/94334619