vue vue-router 实现原理

vue vue-router 实现原理

前言
　　单页应用只有一个页面，所有的页面切换，其实只是组件之间的隐藏显示而已，所有的页面内容都只在一个html上

vue-router是通过对window.location.hash和windown.history进行封装，来实现将hash或url的变化映射为组件的变化

vue-router在browser中有两种模式hash和history
　　hash模式：
　　　　特点：hash模式会在url后面携带#，url不会发生改变，只有#后面的hash参数会发生变化，所以hash参数变化，浏览器并不会发起新的请求

hash改变：

window.location.hash = "new hash";

hash监听：通过window.addEventListener监听hashchange事件察觉hash的改变从而展示对应的component

 window.addEventListener("hashchange", () => {
      console.log("hash changed");
    });

history模式：
　　　　特点：一般来说直接修改url，url的改变会引起浏览器的重新请求，但是使用history下的pushState或replaceState方法时，虽然改变了url但是并不会引起浏览器的重新请求，它们更相当与location.hash=“#new url”,只是在url上#显示为/而已

修改方式：

window.history.pushState({ prop: "value" }, "", "index");
window.history.replaceState({ prop: "value" }, "", "index");
window.history.back();
window.history.forward();//相当于前进按钮
window.history.go(-1);

监听方式：

window.onpopstate = () => {
  console.log("执行改变");
};