Vue-Router的基本原理

        vue-router是通过hash与history interface（history）两种方式实现前端路由，他们可以更新视图但不会重新请求页面是前端路由原理的核心之一，即匹配不同的url路径，进行解析，加载不同的组件，然后动态的渲染出区域 html内容。目前在浏览器环境中这一功能的实现主要有两种模式：

        （1）hash模式：vue-router默认hash模式是使用URL的hash来模拟一个完整的URL，于是当页面的URL改变时，页面不会重新加载，即不会导致浏览器向服务器发出请求。每次 hash值的变化，都会触发hashchange这个事件，我们可以通过这个事件就可以知道 hash值发生了什么变化。这样我们就可以可以通过监听hashchange这个事件来实现更新页面部分内容的操作。hash(#)是URL的锚点，代表的是网页中的一个位置，只是改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说#是用来引导浏览器做出相应动作的，对服务器端完全没有用，http请求中也不会不包括#及其后面的内容；同时每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，点击“后退”按钮，就可以回到上一次的位置；所以说Hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据。

        （2）history模式：由于hash模式会在url中自带#，会导致url不够简洁直观，给用户较差的视觉体验，我们还可以使用路由的history模式，只需要在配置路由规则时，在创建路由的实例中，我们通过mode参数指定当前创建路由的方式，加入mode:history，这种模式充分利用history.pushState API来完成URL跳转而无须重新加载页面。

        HashHistory中有两个方法：HashHistory.push()将新路由添加到浏览器访问历史的栈顶和HashHistory.replace()替换掉当前栈顶的路由。 在history模式下有punState和replacestate这两个API：(1)可以改变url地且不会发送清求，(2)不仅可以读取历史记录栈，还可以对浏览器历史记录栈进行修改，除此之外，还有popstate()当浏览器跳转到新的状态时，将触发popstate事件。

        缺点：history模式需要后台配置的支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问某个不存在的地址时就会返回404，这就会导致用户体验不佳，因此解决这个缺点的办法如下：需要在服务端增加一个覆盖所有情况的候选资源，如果URL没有匹配任何的静态资源，则应该返回同一个默认的index.html页面，这个页面就是你app依赖的页面。