前端路由简介以及vue-router实现原理( 三 )


到这里其实也就差不多了 , 接下来我们顺带着实现几个API吧:
/*** 跳转 , 添加历史记录* @param location* @example this.push({name: 'home'})* @example this.push('/')*/push (location) {const targetRoute = match(location, this.router.routes)this.transitionTo(targetRoute, () => {changeUrl(this.router.base, this.current.fullPath)})}/*** 跳转 , 添加历史记录* @param location* @example this.replaceState({name: 'home'})* @example this.replaceState('/')*/replaceState(location) {const targetRoute = match(location, this.router.routes)this.transitionTo(targetRoute, () => {changeUrl(this.router.base, this.current.fullPath, true)})}go (n) {window.history.go(n)}function changeUrl(path, replace) {const href = http://kandian.youth.cn/index/window.location.hrefconst i = href.indexOf('#')const base = i >= 0 ? href.slice(0, i) : hrefif (replace) {window.history.replaceState({}, '', `${base}#/${path}`)} else {window.history.pushState({}, '', `${base}#/${path}`)}}源码:
今天给到大家福利是《Vue.js源码全方位深入解析 (含Vue3.0源码分析)》 , 领取方式 , 转发+点赞 , 私信我 "源码" ,即可免费获取 。


推荐阅读