Vue.component('router-link', { props: { to: String, tag: String, }, render(h) { let mode = this._self.$router.mode; let tag = this.tag || 'a'; let routerHistory = this._self.$router.history; return h(tag, { attrs: tag === 'a' ? { href: mode === 'hash' ? '#' + this.to : this.to, } : {}, on: { click: (e) => { if (this.to === routerHistory.current) { e.preventDefault(); return; } routerHistory.current = this.to; switch (mode) { case 'hash': if (tag === 'a') return; location.hash = this.to; break; case 'history': history.pushState({ path: this.to }, null, this.to); break; default: } e.preventDefault(); } }, style: { cursor: 'pointer' } }, this.$slots.default) } })
router-link 可以接受两个属性， to 表示要跳转的路由路径， tag 表示 router-link 要渲染的标签名，默认为标签。如果是 a 标签，我们为其添加一个 href 属性。我们给标签绑定 click 事件，如果检测到本次跳转为当前路由的话什么都不做直接返回，并且阻止默认行为，否者根据 to 更换路由。 hash 模式下并且是 a 标签时候可以直接利用浏览器的默认行为完成url上 hash 的替换，否者重新为 location.hash 赋值。 history 模式下则利用 pushState 去更新url。
以上实现就是一个简单的vue-router，完整代码参见。
总结
以上所述是小编给大家介绍的简化版的vue-router实现思路详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！