Vue写了段时间，开发页面起来已经是唰唰唰了，但是对其中原理却知之甚少。那可不行，为了不错过任何的学习点（在面试官前挺直腰板），得从每个角落，仔仔细细重新学一遍。
为什么要有前端路由
有些WEB每访问一个URL都会从服务端请求一个新的页面（html），这样做往往会造成多余的文件请求和重复的html代码。
<ul> <li><a href="/index.html"></a></li> <li><a href="/user.html"></a></li> <li><a href="/device.html"></a></li></ul>
不知道有没有人经历过上面这种项目。每次点击a标签都会刷出一个新页面。
ajax可以解决这个问题，整体只刷新一次页面（第一次访问域名）。之后的页面可以通过ajax获取html内容，然后再通过dom操作渲染到某个页面元素。这么做的缺点就是所有的页面都是同一个url，用户无法复制到想要的地址。
所以前端路由出现了，同时解决上面的两个问题。前端监听url的变化，并实现页面的更改，url虽然变化了，但实际的页面还是原来的页面，没有刷新页面。
实现原理
咦，我都访问不同url了，你怎么会不刷新页面呢。
有这么一个常用的功能相信大家应该都知道
命名锚
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端
常用的就是定位文档顶部。只要在url上加一个#，它就能回到顶部，且不刷新页面。#号后面的字符是用于浏览器的，不会发送到服务端。所以我们可以监听这个值来判断加载的内容。通过读取location.hash可以知道当前页面所处的位置，比如url是‘jianshu.com/#/123’，那么他的location.hash就是‘/123’。通过hashchange事件可以监听location.hash的变化，再通过hash值来判断需要加载的页面。大致就是ajax请求html渲染的同时，还要改变一下hash值。反过来监听到hash值的改变也要用ajax加载对应的html。
history有两个API也可以改变URL但不刷新页面。
history.pushState,history.replaceState都可以无刷新的改变url。主要区别在于pushState会在浏览器中创建一条新的历史纪录，而replaceState仅仅替换将当前地址为指定URL。
popstate： 浏览器点击前进后退时触发的事件。
写个测试代码在控制台跑一下：
var stateObj= {foo:'bar'};window.addEventListener('popstate',function(){
alert(1);
});
history.pushState(stateObj, "page 2", "bar.html");这个时候url已经变了。但是pushState不会触发popstate事件，再执行下
history.back();
就能弹出1了。通过这点就可以实现前端路由，和上面通过hashchange事件监听hash变化类似。
实现一个简单路由
利用vue的is特性和hash的知识写一个简单路由。
首先实现一个router类
class Router{ constructor(){ this.routes = new Map(); //维护一个路由表
this.currentUrl = ''; //当前路径
this.bind(); //绑定事件
}
bind(){ //针对浏览器第一次输url的情况
window.addEventListener('load',this.refresh.bind(this),false); //针对浏览器改变url的情况
window.addEventListener('hashchange',this.refresh.bind(this),false);
}
route(path,callback){ //添加路由，并设置访问该路由的回调函数
this.routes.set(path,callback);
}
replace(path){ //切换路由
this.currentUrl = path; this.routes.get(path)(); //执行添加路由时设置的回调函数
location.hash = path; //切换路由的时候要修改url
}
refresh(){ //刷新，从url中获取当前路由
this.currentURL = location.hash.slice(1) || '/one'; if(this.currentURL == '/') this.currentURL = '/one'; this.routes.get(this.currentURL)();
}
}Vue文件
<div id="app">
<ul>
<li @click="$router.replace('/one')">1</li>
<li @click="$router.replace('/two')">2</li>
<li @click="$router.replace('/three')">3</li>
</ul>
<div :is="currentComponent">
</div></div>li调用路由的replace方法，触发绑定的回调，改变currentComponent从而达到更换组件的效果。
router.route('/one',()=>{ this.currentComponent = 'tab-1'; //更换组件})为了让route回调函数的this指向Vue（通过this.currentComponent = 'tab-1'来更换组件）我在Vue的created中生成route，并用箭头函数绑定this，不知道还有没有更好的办法。
作者：闪闪发光的狼
链接：https://www.jianshu.com/p/35be0f4b6ad3
随时随地看视频
