关于前端:vuerouter源码六routerresolve源码解析

【vue-router 源码】系列文章将带你从 0 开始理解 vue-router 的具体实现。该系列文章源码参考 vue-router v4.0.15。源码地址：https://github.com/vuejs/router
浏览该文章的前提是你最好理解 vue-router 的根本应用，如果你没有应用过的话，可通过 vue-router 官网学习下。

该篇文章将介绍 router.resolve 的实现。

router.resolve办法返回路由地址的标准化版本。

router.resolve('admin')
router.resolve({path: '/admin'})

resolve接管两个参数：rawLocation、currentLocation（可选）。其中 rawLocation 是待转换的路由，rawLocation能够是个对象也能够是个字符串。currentLocation不传默认是currentRoute。

在 resolve 中有是两个分支：

如果 rawLocation 是string类型
调用 parseURL 解析rawLocation:

const locationNormalized = parseURL(
parseQuery,
rawLocation,
currentLocation.path
)

parseURL接管三个参数：parseQuery（一个 query 解析函数）、location（被解析的location）、currentLocation（以后的location）。

export function parseURL(parseQuery: (search: string) => LocationQuery,
location: string,
currentLocation: string = '/'
): LocationNormalized {
let path: string | undefined,
  query: LocationQuery = {},
  searchString = '',
  hash = ''

// location 中? 的地位
const searchPos = location.indexOf('?')
// location 中 #的地位，如果 location 中有?，在? 之后找#
const hashPos = location.indexOf('#', searchPos > -1 ? searchPos : 0)

// 如果
if (searchPos > -1) {// 从 location 中截取 [0, searchPos) 地位的字符串作为 path
  path = location.slice(0, searchPos)
  // 从 location 截取含 search 的字符串，不蕴含 hash 局部
  searchString = location.slice(
    searchPos + 1,
    hashPos > -1 ? hashPos : location.length
  )
  // 调用 parseQuery 生成 query 对象
  query = parseQuery(searchString)
}
// 如果 location 中有 hash
if (hashPos > -1) {path = path || location.slice(0, hashPos)
  // 从 location 中截取 [hashPos, location.length) 作为 hash（蕴含 #）hash = location.slice(hashPos, location.length)
}

// 解析以. 结尾的相对路径
path = resolveRelativePath(path != null ? path : location, currentLocation)
// empty path means a relative query or hash `?foo=f`, `#thing`

return {
    // fullPath = path + searchString + hash
  fullPath: path + (searchString && '?') + searchString + hash,
  path,
  query,
  hash,
}
}

来看下，相对路径的解析过程：

export function resolveRelativePath(to: string, from: string): string {
// 如果 to 以 / 结尾，阐明是个绝对路径，间接返回即可
if (to.startsWith('/')) return to
// 如果 from 不是以 / 结尾，那么阐明 from 不是绝对路径，也就无奈揣测出 to 的绝对路径，此时间接返回 to
if (__DEV__ && !from.startsWith('/')) {
  warn(`Cannot resolve a relative location without an absolute path. Trying to resolve "${to}" from "${from}". It should look like "/${from}".`
  )
  return to
}

if (!to) return from
// 应用 / 宰割 from 与 to
const fromSegments = from.split('/')
const toSegments = to.split('/')

// 初始化 position 默认为 fromSegments 的最初一个索引
let position = fromSegments.length - 1
let toPosition: number
let segment: string

for (toPosition = 0; toPosition < toSegments.length; toPosition++) {segment = toSegments[toPosition]
  // 保障 position 不会小于 0
  if (position === 1 || segment === '.') continue
  if (segment === '..') position--
  else break
}

return (fromSegments.slice(0, position).join('/') +
  '/' +
  toSegments
    .slice(toPosition - (toPosition === toSegments.length ? 1 : 0))
    .join('/')
)
}

to=cc，from=/aa/bb，通过 resolveRelativePath 后：/aa/cc
to=cc，from=/aa/bb/，通过 resolveRelativePath 后：/aa/bb/cc
to=./cc，from=/aa/bb，通过 resolveRelativePath 后：/aa/cc
to=./cc，from=/aa/bb/，通过 resolveRelativePath 后：/aa/bb/cc
to=../cc，from=/aa/bb，通过 resolveRelativePath 后：/aa
to=../cc，from=/aa/bb/，通过 resolveRelativePath 后：/aa/cc
如果 from/，to=cc、to=./cc、to=../cc、to=../../cc、to=./../cc、to=.././cc 通过 resolveRelativePath 始终返回/cc

回到 resolve 中，解析完 rawLocation 后，调用matcher.resolve

const matchedRoute = matcher.resolve({ path: locationNormalized.path},
  currentLocation
)
// 应用 routerHistory.createHref 创立 href
const href = routerHistory.createHref(locationNormalized.fullPath)

最初返回对象：

return assign(locationNormalized, matchedRoute, {
  // 对 params 中的 value 进行 decodeURIComponent
  params:decodeParams(matchedRoute.params),
  // 对 hash 进行 decodeURIComponent
  hash: decode(locationNormalized.hash),
  redirectedFrom: undefined,
  href,
})

rawLocation不是 string 类型

let matcherLocation: MatcherLocationRaw

// 如果 rawLocation 中有 path 属性
if ('path' in rawLocation) {
  // rawLocation 中的 params 会被疏忽
  if (
    __DEV__ &&
    'params' in rawLocation &&
    !('name' in rawLocation) &&
    Object.keys(rawLocation.params).length
  ) {
    warn(
      `Path "${rawLocation.path}" was passed with params but they will be ignored. Use a named route alongside params instead.`
    )
  }
  // 解决 path 为绝对路径
  matcherLocation = assign({}, rawLocation, {path: parseURL(parseQuery, rawLocation.path, currentLocation.path).path,
  })
} else {
  // 删除空的参数
  const targetParams = assign({}, rawLocation.params)
  for (const key in targetParams) {if (targetParams[key] == null) {delete targetParams[key]
    }
  }
  // 对 params 进行编码
  matcherLocation = assign({}, rawLocation, {params: encodeParams(rawLocation.params),
  })
  // 将以后地位的 params 编码 以后地位的参数被解码，咱们须要对它们进行编码以防匹配器合并参数
  currentLocation.params = encodeParams(currentLocation.params)
}

// 调用 matcher.resolve 获取路由相干信息
const matchedRoute = matcher.resolve(matcherLocation, currentLocation)
const hash = rawLocation.hash || ''if (__DEV__ && hash && !hash.startsWith('#')) {
  warn(`A \`hash\` should always start with the character "#". Replace "${hash}" with "#${hash}".`
  )
}

// 因为 matcher 曾经合并了以后地位的参数，所以须要进行解码
matchedRoute.params = normalizeParams(decodeParams(matchedRoute.params))

// 生成残缺 path
const fullPath = stringifyURL(
  stringifyQuery,
  assign({}, rawLocation, {hash: encodeHash(hash),
    path: matchedRoute.path,
  })
)
// routerHistory.createHref 会删除 #之前的任意字符
const href = routerHistory.createHref(fullPath)
if (__DEV__) {if (href.startsWith('//')) {
    warn(`Location "${rawLocation}" resolved to "${href}". A resolved location cannot start with multiple slashes.`
    )
  } else if (!matchedRoute.matched.length) {
    warn(`No match found for location with path "${'path' in rawLocation ? rawLocation.path : rawLocation}"`
    )
  }
}

return assign(
  {
    fullPath,
    hash,
    query:
    // 如果 query 是个嵌套对象，normalizeQuery 会将嵌套的对象 toString，如果用户应用 qs 等库，咱们须要放弃 query 的状态
    // https://github.com/vuejs/router/issues/328#issuecomment-649481567
      stringifyQuery === originalStringifyQuery
        ? normalizeQuery(rawLocation.query)
        : ((rawLocation.query || {}) as LocationQuery),
  },
  matchedRoute,
  {
    redirectedFrom: undefined,
    href,
  }
)

前言

应用

resolve