vue-compositions

useHistory

追踪 history 的变化

TIP

代理拦截 pushState 以及 replaceState，实现调用 popState 、 replaceState 以及 pushState 时，可以追踪到 history 的状态变化

API 

const { state, hash, search, host, hostname, href, origin, pathname, port, protocol, clear } = useHistory()

Result

参数名描述类型
statehistory.stateAny
hashlocation.hashDeepReadonly<Ref<string>>
searchlocation.searchDeepReadonly<Ref<string>>
hostlocation.hostDeepReadonly<Ref<string>>
hostnamelocation.hostnameDeepReadonly<Ref<string>>
originlocation.originDeepReadonly<Ref<string>>
pathnamelocation.pathnameDeepReadonly<Ref<string>>
portLocation.portDeepReadonly<Ref<number>>
protocollocation.protocolDeepReadonly<Ref<number>>
clear清除对 popstate、pushstate和replacestate的监听，不再响应变化() => void

Example

hash:

search:

host:

hostname:

origin:

pathname:

port:

protocol:

Code 

<template>
  <p>hash: {{ hash }}</p>
  <p>search: {{ search }}</p>
  <p>host: {{ host }}</p>
  <p>hostname: {{ hostname }}</p>
  <p>origin: {{ origin }}</p>
  <p>pathname: {{ pathname }}</p>
  <p>port: {{ port }}</p>
  <p>protocol: {{ protocol }}</p>
</template>

<script>
import { useHistory } from 'vue-compositions'
export default {
  setup() {
    return useHistory()
  }
}
</script>