英雄联盟投注,英雄联盟,英雄联盟下注,LOL投注官网,英雄联盟赛事投注,英雄联盟下注,英雄联盟电竞,英雄联盟投注网站,LOL,英雄联盟赛事,LOL投注,LOL赛事下注,LOL投注网站,lol下注平台History 模式触发路由跳转的方式与 Hash 模式稍有不同。通过 【第2194期】SPA 路由三部曲之核心原理 我们了解到，pushState、replaceState、a 标签改变 URL 都不会触发 window.onpopstate 事件。那该怎么办，在实际开发过程中，我们是需要在 HTML 中进行跳转的。好在可以拦截 a 标签的点击事件，阻止 a 标签默认事件，检测 URL，使用 pushState 进行跳转。

　　细心的同学应该发现了，在 HashRouter 类的 init 方法中，处理了页面首次渲染的情况，但在 HistoryRouter 类中却没有。这是为什么呢？Hash 模式下，改变的是 URL 的 hash 值，浏览器请求是不携带 hash 值的，所以由 到 ， 浏览器是不发送请求。History 模式下，改变的则是 URL 除锚点外的其他部分，所以由 到 ，浏览器会重新发送请求。这也就解释了 vue-router 的 Hash 模式，后端不需要做任何处理，而 History 模式后端需要将域名下匹配不到的静态资源，重定向到同一个 index.html 页面。

　　上述代码中，是在组件 beforeCreate 阶段混入的路由信息，是有什么特殊的含义吗？在 Vue 初始化 beforeCreate 阶段，会将 Vue 之前定义的原型方法(Vue.prototype)、全局 API 属性、全局 Vue.mixin 内的参数，合并成一个新的 options，并挂载到 $options 上。在根组件上，$options 可以获得到 myRouter 对象。this 指向的是当前 Vue 实例，即根实例，myRouter 对象通过自定义的 _myRouter 变量，挂载到根实例上。子组件在初始化 beforeCreate 阶段，除了合并 install 方法中定义的 Vue.mixin 的内容外，还会将父组件的参数进行合并，比如父组件定义在子组件上的 props，当然还包括在根组件上自定义的 _myRouter 属性。

　　$myRoute 用于存储当前路径。参照 vue-router 的 $route，$myRoute 的属性包括：path、name、hash、meta、fullPath、query、params，那如何获取这些值呢？不管在哪种路由模式下，MyRouter 类肯定会包含通过 URL 与配置的路由表做匹配，获得到目标路由信息的逻辑处理，$myRouter 又可以拿到 MyRouter 类的所有信息，是不是很完美。在 MyRouter 类中定义 current 属性，用于存储目标路由信息，current 会根据路由的改变而重新赋值，也就保证了 $myRouter 中一直目标路由的信息。

　　正常渲染，没有报错，使用 p 标签成功渲染，但问题也就接踵而至。my-router-link 默认渲染成 a 标签，history 路由模式下，a 标签默认的跳转事件，不仅会跳出当前的 document，还不能触发 popstate 事件。如果使用的是自定义标签，触发导航的时候，需要用 pushState 或 window.location.hash 更新 URL，难道这里还要写 if 判断？No，为何不阻止 a 标签的默认事件呢，这样一来，a 标签与自定义标签就没有差别了，导航标签都通过 pushState 或 window.location.hash 进行路由导航。

　　太不容易了，单实现 MyRouterLink 组件就死了无数的脑细胞。接下来，让大脑放松一下！按照 MyRouterLink 组件的思路，实现 MyRouterView 组件。MyRouterView 的功能相对简单，将当前路由匹配到的组件进行渲染就行。还记得上面提到的 $myRoute 对象吗，将当前路由信息注入到了每个 vue 实例中，在 $myRoute 对象上新增 component 属性，存储路由对应的组件。其实，在 $route 的 matched 数组中，同样记录着组件信息，包括嵌套路由组件、动态路由匹配 regx 等等，小编只是将其简化。

　　vue-router 实现思路不难，源码逻辑却是相当的复杂，MyRouter 相比 vue-router 虽然简化了很多，但整体思路是一致的。小编相信，MyRouter 的实现一定能帮助小伙伴更加快速的掌握 vue-router 的源码。小伙伴们在编写代码时，有没有跟小编一样的经历，需要不停地修改、完善之前的代码，哪怕当时想的很全面，也依然会亲手把代码删除，单单是 my-router-link 组件的实现，小编就修改了不下五遍。过程虽然痛苦，但结果却是收获却满满，成就感爆棚。由衷佩服 vue-router 的开发者，不知道他们是进行多少遍的修改，才能做到如今的地步！