Vue-Router

路由是什么

通过互联的网络把信息从源地址传输到目的地址的活动；
路由通常根据路由表 —— 一个存储到各个目的地的最佳路径的表 —— 来引导分组转送。
做成硬件之后就是路由器。

hash模式

hash模式代码： 查看代码
点击，在URL里会添加以#开头的字段，可通过window.location.hash获取该字符段，hashchange事件可监听hash值改变。
优点：
完全前端路由，只改变#后面值，无刷新。
优点：
不会出现在http请求中，SEO不友好。(服务器收不到hash)

history模式

history模式代码： https://codesandbox.io/s/oqjvqm6w05

1. 通过window.location.pathname获取/路径字段，

2. 通过history.back()、history.go()、history.forward()完成后退前进等操作，

3. 在HTML5新增了pushState、replaceState，通过window.history.pushState(stateObject,title,url)将路由添加到历史堆栈中去，replaceState()修改历史堆栈的记录，可通过history.state查看当前状态记录，但这只是修改了URL的路径，不会加载刷新页面，window.onpopstate对状态监听，但只会在浏览器的前进、后退按钮或者javascript的history.back()、history.go()、history.forward()方法中触发。

优点：
在同源的情况下，实现了前端完全自由，stateObject可以是任何数据类型，URL可以是相对路径也可以是绝对路径。
缺点：
如果后端没有做对应的路由，在刷新时会出现404。（后端将所有路由渲染到同一页面）

memory模式

memory模式代码： https://codesandbox.io/s/936269l69o

该模式就是将路由存在一个对象里，在URL里看不到对应的路径，适用于手机端，但使用很少。

路由导航守卫 - 控制跳转访问

beforeEach函数
router.beforeEach((to, from, next))=>{
    // to：去哪里 from：来自哪里 next：放行函数
	if(to.pacth === '/login') return next()
}

Vue-Router源码

<router-link to="/xx"></router-link>相当于一个a标签，to相当于href属性。
<router-view></router-view>则是展示的内容。
/*
VueRouter原理
源码
源码扫了一遍，看着确实为难，但了解了大概思路，


首先是封装了RouterView
只接受一个name属性

render函数return一个h(component, data, children)，
其实就是创建要渲染的组件，只不过中间对component组件、data对象、children子集做了一些处理。

2.再者是封装了RouterLink
//包含to、tag、activeClass、event等属性

//LinK的render最终return的是h(this.tag, data, this.$slots.default)，相当于默认创建了一个a标签，只是对a标签做了如下事件监听

//执行的函数，调用了replace或者push方法
    var handler = function (e) {
   
        if (guardEvent(e)) {
   
          if (this$1.replace) {
   
            router.replace(location, noop);
          } else {
   
            router.push(location, noop);
          }
        }
    };
    
//默认监听click事件
    var on = {
    click: guardEvent };

//对传入事件判断并监听
    if (Array.isArray(this.event)) {
   
        this.event.forEach(function (e) {
   
          on[e] = handler;
        });
    } else {
   
        on[this.event] = handler;
    }

// 3.封装VueRouter

var VueRouter = function VueRouter (options) {
   
  if ( options === void 0 ) options = {
   };

  this.app = null;
  this.apps = []