linux hash方式的路由协议叫什么名字,vue的路由信息对象中的hash到底指什么

因为location是对整个路由进行判定，而路由信息对象是对其fullPath进行判定的。

所以一开始遇到问题的路径localhost:8080/#/2是没有路由哈希值得因此返回为空串。

如果是localhost:8080/#/2#222则路由信息对象的hash值为#222

而其location.hash为#/2/2#222

最开始对这个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)

}

关于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