vue router 源码概览案例分析

if (installedPlugins.indexOf(plugin) > -1) {
 return this
}

if (typeof plugin.install === 'function') {
 plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
 plugin.apply(null, args)
}

// src/install.js
Vue.mixin({
 beforeCreate () {
  if (isDef(this.$options.router)) {
   this._routerRoot = this
   this._router = this.$options.router
   this._router.init(this)
   Vue.util.defineReactive(this, '_route', this._router.history.current)
  } else {
   this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
  }
  registerInstance(this, this)
 },
 destroyed () {
  registerInstance(this)
 }
})
...
// 全局注册 `router-view` 和 `router-link`组件
Vue.component('RouterView', View)
Vue.component('RouterLink', Link)

// src/index.js
let mode = options.mode || 'hash'
this.fallback = mode === 'history' && !supportsPushState && options.fallback !== false
if (this.fallback) {
 mode = 'hash'
}
if (!inBrowser) {
 mode = 'abstract'
}

// src/index.js
switch (mode) {
 case 'history':
  this.history = new HTML5History(this, options.base)
  break
 case 'hash':
  this.history = new HashHistory(this, options.base, this.fallback)
  break
 case 'abstract':
  this.history = new AbstractHistory(this, options.base)
  break
 default:
  if (process.env.NODE_ENV !== 'production') {
   assert(false, `invalid mode: ${mode}`)
  }
}

// src/create-route-map.js
function addRouteRecord (
 pathList: Array<string>,
 pathMap: Dictionary<RouteRecord>,
 nameMap: Dictionary<RouteRecord>,
 route: RouteConfig,
 parent"htmlcode">

// src/create-route-map.js
if (!pathMap[record.path]) {
 pathList.push(record.path)
 pathMap[record.path] = record
}


例如如下路由配置，路由 /bar 只会匹配 Bar1 ， Bar2 这一条配置会被忽略


const routes = [
 { path: '/foo', component: Foo },
 { path: '/bar', component: Bar1 },
 { path: '/bar', component: Bar2 },
];


路由切换
当访问一个 url 的时候， vue-router 会根据路径进行匹配，创建出一个 route 对象，可通过 this.$route 进行访问


// src/util/route.js
const route: Route = {
 name: location.name || (record && record.name),
 meta: (record && record.meta) || {},
 path: location.path || '/',
 hash: location.hash || '',
 query,
 params: location.params || {},
 fullPath: getFullPath(location, stringifyQuery),
 matched: record "htmlcode">

transitionTo (location: RawLocation, onComplete"htmlcode">

// src/history/hash.js
push (location: RawLocation, onComplete"htmlcode">

// src/history/base.js
const queue: Array<"htmlcode">

// src/history/base.js
// 异步回调函数
runQueue(queue, iterator, () => {
 const postEnterCbs = []
 const isValid = () => this.current === route
 // wait until async components are resolved before
 // extracting in-component enter guards
 const enterGuards = extractEnterGuards(activated, postEnterCbs, isValid)
 const queue = enterGuards.concat(this.router.resolveHooks)
 // 递归执行
 runQueue(queue, iterator, () => {
  if (this.pending !== route) {
   return abort()
  }
  this.pending = null
  onComplete(route)
  if (this.router.app) {
   this.router.app.$nextTick(() => {
    postEnterCbs.forEach(cb => { cb() })
   })
  }
 })
})


通过 next 进行导航守卫的回调迭代，所以如果在代码中显式声明了导航钩子函数，那么就必须在最后调用 next() ，否则回调不执行，导航将无法继续


// src/history/base.js
const iterator = (hook: NavigationGuard, next) => {
 ...
 hook(route, current, (to: any) => {
  ...
  } else {
   // confirm transition and pass on the value
   next(to)
  }
 })
...
}


路由同步
在路由切换的时候， vue-router 会调用 push 、 go 等方法实现视图与地址 url 的同步
地址栏 url 与视图的同步
当进行点击页面上按钮等操作进行路由切换时， vue-router 会通过改变 window.location.href 来保持视图与 url 的同步，例如 hash 模式的路由切换：


// src/history/hash.js
function pushHash (path) {
 if (supportsPushState) {
  pushState(getUrl(path))
 } else {
  window.location.hash = path
 }
}


上述代码，先检测当前浏览器是否支持 html5 的 History API ，如果支持则调用此 API 进行 href 的修改，否则直接对 window.location.hash 进行赋值 history 的原理与此相同，也是利用了 History API
视图与地址栏 url 的同步
当点击浏览器的前进后退按钮时，同样可以实现视图的同步，这是因为在路由初始化的时候，设置了对浏览器前进后退的事件监听器
下述是 hash 模式的事件监听：


// src/history/hash.js
setupListeners () {
 ...
 window.addEventListener(supportsPushState "htmlcode">

// src/history/html5.js
window.addEventListener('popstate', e => {
 const current = this.current

 // Avoiding first `popstate` event dispatched in some browsers but first
 // history route not updated since async guard at the same time.
 const location = getLocation(this.base)
 if (this.current === START && location === initLocation) {
  return
 }

 this.transitionTo(location, route => {
  if (supportsScroll) {
   handleScroll(router, route, current, true)
  }
 })
})


无论是 hash 还是 history ，都是通过监听事件最后来调用 transitionTo 这个方法，从而实现路由与视图的统一
另外，当第一次访问页面，路由进行初始化的时候，如果是 hash 模式，则会对 url 进行检查，如果发现访问的 url 没有带 # 字符，则会自动追加，例如初次访问 http://localhost:8080 这个 url ， vue-router 会自动置换为 http://localhost:8080/#/ ，方便之后的路由管理：


// src/history/hash.js
function ensureSlash (): boolean {
 const path = getHash()
 if (path.charAt(0) === '/') {
  return true
 }
 replaceHash('/' + path)
 return false
}


scrollBehavior
当从一个路由 /a 跳转到另外的路由 /b 后，如果在路由 /a 的页面中进行了滚动条的滚动行为，那么页面跳转到 /b 时，会发现浏览器的滚动条位置和 /a 的一样（如果 /b 也能滚动的话），或者刷新当前页面，浏览器的滚动条位置依旧不变，不会直接返回到顶部的 而如果是通过点击浏览器的前进、后退按钮来控制路由切换时，则部门浏览器(例如微信)滚动条在路由切换时都会自动返回到顶部，即 scrollTop=0 的位置 这些都是浏览器默认的行为，如果想要定制页面切换时的滚动条位置，则可以借助 scrollBehavior 这个 vue-router 的 options
当路由初始化时， vue-router 会对路由的切换事件进行监听，监听逻辑的一部分就是用于控制浏览器滚动条的位置：


// src/history/hash.js
setupListeners () {
 ...
 if (supportsScroll) {
  // 进行浏览器滚动条的事件控制
  setupScroll()
 }
 ...
}


这个 set 方法定义在 src/util/scroll.js ，这个文件就是专门用于控制滚动条位置的，通过监听路由切换事件从而进行滚动条位置控制：


// src/util/scroll.js
window.addEventListener('popstate', e => {
 saveScrollPosition()
 if (e.state && e.state.key) {
  setStateKey(e.state.key)
 }
})


通过 scrollBehavior 可以定制路由切换的滚动条位置， vue-router 的github上的源码中，有相关的 example ，源码位置在 vue-router/examples/scroll-behavior/app.js
router-view & router-link
router-view 和 router-link 这两个 vue-router 的内置组件，源码位于 src/components 下
router-view
router-view 是无状态(没有响应式数据)、无实例(没有 this 上下文)的函数式组件，其通过路由匹配获取到对应的组件实例，通过 h 函数动态生成组件，如果当前路由没有匹配到任何组件，则渲染一个注释节点


// vue-router/src/components/view.js
...
const matched = route.matched[depth]
// render empty node if no matched route
if (!matched) {
 cache[name] = null
 return h()
}
const component = cache[name] = matched.components[name]
...
return h(component, data, children)


每次路由切换都会触发 router-view 重新 render 从而渲染出新的视图，这个触发的动作是在 vue-router 初始化 init 的时候就声明了的：


// src/install.js
Vue.mixin({
 beforeCreate () {
  if (isDef(this.$options.router)) {
   this._routerRoot = this
   this._router = this.$options.router
   this._router.init(this)
   // 触发 router-view重渲染
   Vue.util.defineReactive(this, '_route', this._router.history.current)
   ...
})


将 this._route 通过 defineReactive 变成一个响应式的数据，这个 defineReactive 就是 vue 中定义的，用于将数据变成响应式的一个方法，源码在 vue/src/core/observer/index.js 中，其核心就是通过 Object.defineProperty 方法修改数据的 getter 和 setter ：


Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: function reactiveGetter () {
   const value = getter "htmlcode">

// vue-router/src/components/view.js
render (_, { props, children, parent, data }) {
 // used by devtools to display a router-view badge
 data.routerView = true

 // directly use parent context's createElement() function
 // so that components rendered by router-view can resolve named slots
 const h = parent.$createElement
 const name = props.name
 // 触发依赖收集，建立 render watcher
 const route = parent.$route
 ...
}


这个 render watcher 的派发更新，也就是 setter 的调用，位于 src/index.js ：


history.listen(route => {
 this.apps.forEach((app) => {
  // 触发 setter
  app._route = route
 })
})


router-link
router-link 在执行 render 函数的时候，会根据当前的路由状态，给渲染出来的 active 元素添加 class ，所以你可以借助此给 active 路由元素设置样式等：


// src/components/link.js
render (h: Function) {
 ...
 const globalActiveClass = router.options.linkActiveClass
 const globalExactActiveClass = router.options.linkExactActiveClass
 // Support global empty active class
 const activeClassFallback = globalActiveClass == null
  "htmlcode">

// src/components/link.js
data.on = on
data.attrs = { href }


另外，你可以可以通过传入 tag 这个 props 来定制 router-link 渲染出来的元素标签：
<router-link to="/foo" tag="div">Go to foo</router-link>
如果 tag 值不为 a ，则会递归遍历 router-link 的子元素，直到找到一个 a 标签，则将事件和路由赋值到这个 <a> 上，如果没找到 a 标签，则将事件和路由放到 router-link 渲染出的本身元素上：


if (this.tag === 'a') {
  data.on = on
  data.attrs = { href }
 } else {
  // find the first <a> child and apply listener and href
  // findAnchor即为递归遍历子元素的方法
  const a = findAnchor(this.$slots.default)
  ...
 }
}


当触发这些路由切换事件时，会调用相应的方法来切换路由刷新视图：


// src/components/link.js
const handler = e => {
 if (guardEvent(e)) {
  if (this.replace) {
   // replace路由
   router.replace(location)
  } else {
   // push 路由
   router.push(location)
  }
 }
}


总结
可以看到， vue-router 的源码是很简单的，比较适合新手进行阅读分析
源码这种东西，我的理解是没必要非要 专门腾出时间来看 ，只要你熟读文档，能正确而熟练地运用 API 实现各种需求那就行了，轮子的出现本就是为实际开发所服务而不是用来折腾开发者的，注意，我不是说不要去看，有时间还是要看看的，就算弄不明白其中的道道，但看了一遍总会有收获的，比如我在看 vue 源码的时候，经常看到类似于这种的赋值写法：


// vue/src/core/vdom/create-functional-component.js
(clone.data || (clone.data = {})).slot = data.slot


如果是之前，对于这段逻辑我通常会这么写：


if (clone.data) {
 clone.data.slot = data.slot
} else {
 clone.data = {
  slot: data.slot
 }
}


也不是说第一种写法有什么难度或者看不明白，只是习惯了第二种写法，平时写代码的过程中自然而然不假思索地就写出来了，习惯成自然了，但是当看到第一种写法的时候才会一拍脑袋想着原来这么写也可以，以前白敲了那么多次键盘，所以没事要多看看别人优秀的源码，避免沉迷于自己的世界闭门造车，这样才能查漏补缺，这同样也是我认为代码 review 比较重要的原因，自己很难发现的问题，别人可能一眼就看出来了，此之谓 当局者迷旁观者清也
以上所述是小编给大家介绍的vue router 源码概览，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

            
           
            上一篇：Vue官方推荐AJAX组件axios.js使用方法详解与API

            下一篇：Angular4 Select选择改变事件的方法

        
    
    
一句话新闻
Windows上运行安卓你用过了吗
在去年的5月23日，借助Intel Bridge Technology以及Intel Celadon两项技术的驱动，Intel为PC用户带来了Android On Windows（AOW）平台，并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版，将Windows与安卓两大生态进行了融合，PC的使用体验随即被带入到了一个全新的阶段。
    
    

        
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 SiteMap
    
    

        

            

                
首页
                
破解
                
音乐
                
影视