浅析使用vue-router实现前端路由的两种方式

关于vue-router

因为最近的项目中一直在使用vue，因此前端路由方案也是使用的官方路由vue-router，以前在angularJS项目中也是用过UI-router，感受大同小异，不过很显然vue-router更友好一些。本文就以vue-router为例浅析我所理解的前端路由，具体用法和一些基本语法就不一一介绍了，官方文档说的更加清晰

关于前端路由

据我所知，在如今这些MVC和MVVM框架兴起以前，是不存在前端路由的，页面之间的跳转是由后台控制的。随着先后端分离和单页面应用（SPA）的兴起和WEB项目复杂度的增长，再加上前面这些框架的支持，慢慢前端路由也就成为了现实。单页面应用的特色就是能够在改变URL在不从新请求页面的状况下更新页面视图。

"更新视图但不从新请求页面"是前端路由的原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式

• 利用URL中的hash（"#"）
• 利用History interface在 HTML5中新增的方法

下面咱们就来看看vue-router是如何经过这两种方式来实现前端路由的

vue-router实现前端路由的方法和对比

使用过vue-router的都知道，在vue-router中有mode这样一个参数，这个参数的可选值有"hash"、 "history"、"abstract"

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

对应咱们上面讲到的两种方式来讲，hash就是第一种方式，history就是第二种方式，而第三种是在nodejs下的默认实现方式。

那"hash"和"history"这两种方式各有什么优劣呢？

• 首先在vue-router中默认使用的是hash这种方式，由于这种方式虽然带个#有点丑（官方居然都这样说），可是不存在兼容性问题
• 而history因为底层的实现根据MDN的介绍，调用history.pushState()，因此存在浏览器兼容性问题。
• 若是不考虑兼容性问题的话，pushState确定比只修改hash值更增强大，由于能够设置任意同源URL
• pushState能够设置和当前URL如出一辙，这样也会把记录添加到栈中，而hash设置的新值必须和原来不同
• 还有，就算不考虑兼容问题的话，history模式还有一个问题，就是history模式会将URL修改的和正常请求后端的URL同样

  http://oursite.com/user/id

  这样的话若是后端没有配置对应的user/id这样一个地址的话就会返回404，官方推荐的解决办法是在服务端增长一个覆盖全部状况的候选资源：若是 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。同时这么作之后，服务器就再也不返回 404 错误页面，由于对于全部路径都会返回 index.html 文件。为了不这种状况，在 Vue 应用里面覆盖全部的路由状况，而后在给出一个 404 页面。（这种方案我还没实践过，有机会要实践一下）
• 因此综合考虑来讲用在一些中后台项目中的话通常直接就采用hash这种默认方式了，而前台项目的话看需求选择使用history仍是hash

后记

在写这篇文章以前看了一个大神写的分析vue-router的文章，每得出一个结论以前都是截取了相应的源文件，真的是作到了 有理有据，实在佩服。我文中之因此没引用是由于实在没有通读过vue-router的源码，也还不是看的太懂，因此就不班门弄斧了，可是在看这篇文章的过程当中也慢慢打消了一些对源代码的恐惧，原来源代码也没那么晦涩难懂，认真看仍是能看懂大部分的，因此之后移动要多多读这样的文章，慢慢试着去看看源代码，那样获得的结论才是最有一句的，而不是人云亦云，加油！

参考文章：

• 【源码拾遗】从vue-router看前端路由的两种实现
• VueJs路由跳转——vue-router的使用