在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue的路由信息對象中的hash到底指什么

vue的路由信息對象中的hash到底指什么

vue路由信息對象關(guān)于hash的描述如下:

clipboard.png

在查閱源碼后發(fā)現(xiàn)這個(gè)hash確實(shí)是取自location.hash
完整源碼:https://github.com/vuejs/vue-...

clipboard.png

beforeEnter (to, from, next) {
        console.log(to)
        console.log(location.hash)
          }

打印結(jié)果如下:

clipboard.png

此時(shí)我的url是:http://localhost:8080/#/2
按照定義來看應(yīng)該和location一樣.hash是#/2啊

但路由的hash是空串,但是location.hash是存在的
如果是沒有讀取到的話但是fullPath、params等值是存在的
這是什么原因呢?

回答
編輯回答
愛是癌

舉個(gè)簡單的例子,比如你的url是http://localhost:3000/app/studyManagement#hash,在這個(gè)例子中:
1./app/studyManagement就是fullPath,hash就是hash,fullPath和hash沒有關(guān)系
2.params要看你的路由怎么定義,比如你定義了一個(gè)路由/app/:name,那么這里的params應(yīng)該就是{name: 'studyManagement'}

2018年1月28日 21:05
編輯回答
安若晴

因?yàn)閘ocation是對整個(gè)路由進(jìn)行判定,而路由信息對象是對其fullPath進(jìn)行判定的。
所以一開始遇到問題的路徑localhost:8080/#/2是沒有路由哈希值得因此返回為空串。
如果是localhost:8080/#/2#222則路由信息對象的hash值為#222
而其location.hash為#/2/2#222

最開始對這個(gè)hash值不是很理解在多方查找資料無果后決定自己去查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)
}

關(guān)于location定義如下 文件來自vue-router.js

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

關(guān)于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 返回一個(gè)對象其中包含hash屬性。其中關(guān)于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

關(guān)于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
  }
}

此時(shí)可以判斷出hash的取值與next有關(guān),next定義如下

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

如果row是字符串則直接賦值給location,否則取該對象的path值賦值給location。而row取自normalizeLocation的第一個(gè)參數(shù)。也就是resolve中的to。這個(gè)參數(shù)是vue-router.js中傳進(jìn)來的this.to。Link調(diào)用在同文件中:

  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時(shí)獲取參數(shù)to進(jìn)行參數(shù)解構(gòu)拿到to值,如果是字符串直接進(jìn)行解析取得#號(hào)及以后的字符串。如果是對象獲取其path值然后獲取其#號(hào)及以后內(nèi)容
所以localhost:8080/#/123的路由信息對象的hash是空串
而location.hash是#/123

2017年10月21日 23:29
編輯回答
替身
http://localhost:8081/#/#xx

clipboard.png

  • #xx就是路由hash
  • #/#xx 就是 location.hash
2017年2月14日 12:53