前端路由与vue-router

       在现代Web开发中，路由是非常重要的一环。但路由到底是什么呢？有一种说法是，路由就是指随着浏览器地址栏的变化，展示给用户不同的页面，这是从路由的用途上来解释路由的；还有一种说法是，路由就是URL到函数的映射，这是从路由的实现原理上来解释路由的。
       简单举例说明，假如有一台提供Web 服务的服务器的网络地址是10.0.0.1，而该Web服务器又提供了三个可供用户访问的页面，其页面URL分别是

      那么其路径就分别是/，/me，/you。
      当用户使用http：//127.0.0.1/me 来访问该页面时，Web服务器会接收到这个请求，然后会解析URL中的路径/me，在Web服务的程序中，该路径对应着相应的处理逻辑，程序会把请求交给路径所对应的处理逻辑，这样就完成了一次“路由分发”，这个分发就是通过“路由”来完成的。
       以前的项目开发中，路由都是由后台完成的，通过用户请求的URL导航到具体的HTML页面，前端路由就是通过配置JavaScript文件，把这个工作拿到前端来实现。
      通俗地说，路由就是根据不同的URL地址展示不同的内容或页面。
      路由本身也经历了两个不同的发展阶段：后端路由和前端路由。
      后端路由又可称为服务器端路由，因为对于服务器来说，当接收到客户端发来的HITP请求，就会根据所请求的相应URL，来找到相应的映射函数，然后执行该函数，并将函数的返回值发送给客户端。对于最简单的静态资源服务器，可以认为，所有URL的映射函数就是一个文件读取操作；对于动态资源，映射函数可能是一个数据库读取操作，也可能是进行一些数据的处理等。然后根据这些读取的数据，在服务器端使用相应的模板来对页面进行渲染，再返回渲染完毕的页面。后端路由方式在早期的Web开发中非常普遍，它的优点与缺点都很明显。
   （1)优点：安全性好，SEO好。
   （2)缺点：加大服务器的压力，不利于用户体验，代码冗余。

     也正是由于后端路由还存在着以上不足，前端路由才有了属于自己的一片天地与发展的
空间，在当前的Web开发中发挥了重大作用。 

 什么是前端路由
       对于前端路由来说，路由的映射函数通常是进行一些DOM的显示和隐藏操作。这样，当访问不同路径的时候，会显示不同的页面组件。前端路由主要有两种实现方案：Hash路由和History API 路由。Hash 路由以“#号加路径名”的方式，将路由添加到URL地址末尾。History API路由就是通过浏览器提供的History API实现路由的跳转，可以实现直接将路由路径追加到浏览器名末尾。下面了解一下这两种路由的使用方式。
1.Hash
     早期的前端路由的实现就是基于 location.hash来实现的。其实现原理也很简单，loca tion. hash 的值就是URL中#后面的内容。例如下面这个网站，它的 location. hash=' tme':
http://127.0.0.1#me
     此外，Hash路由也存在下面几个特性。
     URL 中的 Hash值只是客户端的一种状态，也就是说当向服务器端发出请求时，Hash部分不会被发送。
     Hash值的改变，都会在浏览器的访问历史中增加一个记录。因此能通过浏览器的回退、前进按钮控制Hash的切换。
     此时可以使用 hashchange事件来监听Hash的变化。
     触发 Hash 变化的方式也有两种，一种是通过<a>标签，并设置 href 属性，当用户点击这个标签后，URL就会发生改变，也就会触发hashehange 事件：
<a href-"#srtian">srtian</a>
      还有一种方式就是直接使用JavaScript来对 loaction. hash进行赋值，从而改变URL，触发hashchange 事件：
location. hash-"#srtian"
2. History API
      前面的 Hash虽然也很不错，但使用时都需要加上#，并不是很美观。因此到了HTML5，又提供了History API来实现 URL的变化。其中最主要的API有以下两个：history.pushSuate()和history. repalceState()。
      这两个API都可以在不进行页面刷新的情况下，操作浏览器的历史记录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录。此外，这两个API 都接收三个参数：状态对象、标题及地址。代码如下所示。
window.history.pushState(null,null,"http://127.0.0.1");
    （1）状态对象（state object)：一个JavaScript对象，与用 pushState（）方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，会触发popState事件，并能在事件中使用该对象，可以为 null。
   （2)标题（title）：路由的名称，一般浏览器会忽略，最好传入null。
   （3）地址（URL)：要跳转的路径，就是需要新增的历史记录的地址，浏览器不会去直接加载该地址，但后面也可能会去尝试加载该地址。此外需要注意的是，传入的URL与当前
URL应该是同源的。