vue Router路由研究总结笔记（一、原理篇）

  路由是每个单页网站或者web app必须要有的，所以首先还是从原理下手加深理解。

一、什么是SPA

   SPA就是单页应用，即single page application，简单理解就是，整个web应用只有一个html文件。它所需要的资源(html,css,js等）在一次请求中就加载完成，所以不需要刷新动态加载，简单理解就是页面在初始化加载后，至少永远不需要频繁的全部动态重新加载。

二、为什么要用SPA

     减轻服务器压力：服务器先将一份完整的资源发送至了客户端，之后客户端只需要按需获取渲染页面或者视图所需要的数据即可。相当于数据和页面呈现脚本进行了分离。

    spa最大的好处就是把大量的工作放在浏览器进行工作，服务端 承担更少的工作，这样服务器就可以处理更多的请求。当然spa需要的额外的请求模板开销，我们可以通过预编译模板，缓存机制和将多个模板拼接成一个大的模板来减少请求数量。

三、SPA缺点

   1.首屏加载时间会很长，至少第一次用时。

   2.SEO不友好。

四、什么是路由？

    路由就是根据不同的url地址展示不同的内容或者页面。早期都是后端路由，即通过根据url来reload页面实现，后来页面来越来越复杂，服务器压力越来越大，随着ajax（异步刷新技术）的出现，页面实现非reload就能刷新数据，让前端控制url自行管理，这时候前端路由由此而生了。

五、SPA中路由有2种实现方式：

    spa做的web应用路径的跳转均是通过js来控制的，通过路由的变化完成显示不同的页面，完成页面的切换。常见的两种（其它不考虑）：hash路由和brower路由：

  （一）window.history:     

优点

对于重定向过程中不会丢失url中的参数。后端可以拿到这部分数据
绝大多数前段框架均提供了browser的路由实现
后端可以准确跟踪路由信息
可以使用history.state来获取当前url对应的状态信息

缺点

兼容性不如hash路由(只兼容到IE10)
需要后端支持，每次返回html文档.

  （二）location.hash（vue-router默认就是用的hash模式）:
优点

实现简单，兼容性好（兼容到ie8）
绝大多数前端框架均提供了给予hash的路由实现
不需要服务器端进行任何设置和开发
除了资源加载和ajax请求以外，不会发起其他请求

缺点

对于部分需要重定向的操作，后端无法获取hash部分内容，导致后台无法取得url中的数据，典型的例子就是微信公众号的oauth验证
服务器端无法准确跟踪前端路由信息
对于需要锚点功能的需求会与目前路由机制冲突