江苏龙网

  1. 首页 > 人文 > >

前端路由简介以及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源码分析）》 ， 领取方式 ， 转发+点赞 ， 私信我 "源码" ，即可免费获取 。


推荐阅读


上一篇：盘点iPhone 12没有太大用处的升级，看完又省钱了？

下一篇：阿里巴巴的一张照片，让网友红了眼眶：马云活该成首富