Vue Router的路由模式 hash 和 history 的实现原理 1. hash 模式的实现原理：
早期的前端路由的实现就是基于 location.hash 来实现的，其实他的原理很简单， location.hash 的值就是URL中 # 后面的内容 如：https://·#search 它的location.hash的值是 #search
hash 路由模式的实现主要是基于下面几个特点： URL 中的 hash 值只是客户端的一种状态，向服务端发送请求的时候，hash 部分不会被发送hash 值得改变会在浏览器的历史记增加访问记录，所以可以通过浏览器的回退、前进控制 hash 值的改变可以通过 a 标签设置 href 值或者通过 js 给location.hash 赋值来改变 hash 值可以通过hashchang 事件来监听 hash 值的变化，从而对页面进行跳转（渲染） 2. history 模式的实现原理HTML5提供了 history API 来实现 URL 的变化，其中最主要的 API 有以下两个： history.pushState() 和 history.replaceState()。这两个API 可以在不刷新的情况下操作浏览器的历史记录，不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录：
windown.history.pushState(null, null, path) windown.history.replaceState(null, null, path) history 路由模式的实现主要是基于下面几个特点： 通过 pushState 和 replaceState 两个API 来操作实现 URL 的变化可以通过 popstate 事假来监听 URL 的变化，从而对页面进行跳转（渲染）history.pushState() 或 history.replaceState() 不会触发 popstate 事件，需要手动触发页面跳转 history 的问题需要后台配置支持。
3. 简单实现 Vue RouterVue Router 的核心是通过 Vue.use 注册插件，在插件的 install 方法中获取用户配置的 router 对象，当浏览器地址发生变化时，根据 router 对象匹配相应路由，获取组件，并将组件渲染到试图上。 （1）如何在 install 方法中获取 vue 实例上的 router 属性 可以利用 Vue.mixin 混入声明周期函数 beforeCreate，在 beforeCreate 函数中可以获取到实例上的属性并赋值到 Vue 原型链上。
_Vue.mixin({ beforeCreate () { if (this.$options.router) { _Vue.prototype.$router = this.$options.router } } })
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
