vue路由信息对象属性分析-hash

关于路由信息对象的hash属性定义如下
这里写图片描述
看了文档以后自己输出路由信息对象
url：localhost:8080/#/2输出路由信息对象和location.hash

这里写图片描述

此时路由信息对象的hash是空串，也就是说没有hash值，按照我的理解觉得r档期路由的hash应该也是#/2
在多方查找资料无果后决定自己去查vue源码。源码如下：
vue-router.js

function createRoute (
  record,
  location,
  redirectedFrom,
  router
) {
  var stringifyQuery$$1 = router && router.options.stringifyQuery;

  var query = location.query || {};
  try {
    query = clone(query);
  } catch (e) {}

  var route = {
    name: location.name || (record && record.name),
    meta: (record && record.meta) || {},
    path: location.path || '/',
    hash: location.hash || '',
    query: query,
    params: location.params || {},
    fullPath: getFullPath(location, stringifyQuery$$1),
    matched: record ? formatMatch(record) : []
  };
  if (redirectedFrom) {
    route.redirectedFrom = getFullPath(redirectedFrom, stringifyQuery$$1);
  }
  return Object.freeze(route)
}

关于location定义如下文件来自vue-router.js

 var ref = router.resolve(this.to, current, this.append);
 var location = ref.location;

关于resolve定义如下，定义来自index.js

  resolve (
    to: RawLocation,
    current?: Route,
    append?: boolean
  ): {
    location: Location,
    route: Route,
    href: string,
    // for backwards compat
    normalizedTo: Location,
    resolved: Route
  } {
    const location = normalizeLocation(
      to,
      current || this.history.current,
      append,
      this
    )
    const route = this.match(location, current)
    const fullPath = route.redirectedFrom || route.fullPath
    const base = this.history.base
    const href = createHref(base, fullPath, this.mode)
    return {
      location,
      route,
      href,
      // for backwards compat
      normalizedTo: location,
      resolved: route
    }
  }

此处的location的定义来自location.js

export function normalizeLocation (
  raw: RawLocation,
  current: ?Route,
  append: ?boolean,
  router: ?VueRouter
): Location {
  let next: Location = typeof raw === 'string' ? { path: raw } : raw
  // named target
  if (next.name || next._normalized) {
    return next
  }

  // relative params
  if (!next.path && next.params && current) {
    next = assign({}, next)
    next._normalized = true
    const params: any = assign(assign({}, current.params), next.params)
    if (current.name) {
      next.name = current.name
      next.params = params
    } else if (current.matched.length) {
      const rawPath = current.matched[current.matched.length - 1].path
      next.path = fillParams(rawPath, params, `path ${current.path}`)
    } else if (process.env.NODE_ENV !== 'production') {
      warn(false, `relative params navigation requires a current route.`)
    }
    return next
  }

  const parsedPath = parsePath(next.path || '')
  const basePath = (current && current.path) || '/'
  const path = parsedPath.path
    ? resolvePath(parsedPath.path, basePath, append || next.append)
    : basePath

  let hash = next.hash || parsedPath.hash
  if (hash && hash.charAt(0) !== '#') {
    hash = `#${hash}`
  }

  return {
    _normalized: true,
    path,
    query,
    hash
  }
}

normalizeLocation 返回一个对象其中包含hash属性。其中关于hash的定义为

  const parsedPath = parsePath(next.path || '')
  const basePath = (current && current.path) || '/'
  const path = parsedPath.path
    ? resolvePath(parsedPath.path, basePath, append || next.append)
    : basePath

  let hash = next.hash || parsedPath.hash

关于parsePath方法定义自path.js

export function parsePath (path: string): {
  path: string;
  query: string;
  hash: string;
} {
  let hash = ''
  let query = ''

  const hashIndex = path.indexOf('#')
  if (hashIndex >= 0) {
    hash = path.slice(hashIndex)
    path = path.slice(0, hashIndex)
  }

  const queryIndex = path.indexOf('?')
  if (queryIndex >= 0) {
    query = path.slice(queryIndex + 1)
    path = path.slice(0, queryIndex)
  }

  return {
    path,
    query,
    hash
  }
}

此时可以判断出hash的取值与next有关，next定义如下

let next: Location = typeof raw === 'string' ? { path: raw } : raw

如果row是字符串则直接赋值给location，否则取该对象的path值赋值给location。而row取自normalizeLocation的第一个参数。也就是resolve中的to。这个参数是vue-router.js中传进来的this.to。Link调用在同文件中：

  Vue.component('router-link', Link);

其中的to来自于自身的定义：

var Link = {
  name: 'router-link',
  props: {
    to: {
      type: toTypes,
      required: true
    },
    tag: {
      type: String,
      default: 'a'
    },
    exact: Boolean,
    append: Boolean,
    replace: Boolean,
    activeClass: String,
    exactActiveClass: String,
    event: {
      type: eventTypes,
      default: 'click'
    }
    a = {render: Link.render, to:Link.props.to}
  }, 
  render: function render (h) {
    var this$1 = this;

    var router = this.$router;
    var current = this.$route;
    var ref = router.resolve(this.to, current, this.append);
    var location = ref.location;
    var route = ref.route;
    var href = ref.href;
    return h(this.tag, data, this.$slots.default)
  }
};

完整流程为使用router-link时获取参数to进行参数解构拿到to值，如果是字符串直接进行解析取得#号及以后的字符串。如果是对象获取其path值然后获取其#号及以后内容
所以localhost:8080/#/123的路由信息对象的hash是空串
而location.hash是#/123
因为location是对整个路由进行判定，而路由信息对象是对其fullPath进行判定的。所以一开始遇到问题的路径localhost:8080/#/2是没有路由哈希值得因此返回为空串。

vue路由信息对象属性分析-hash

猜你喜欢