如何用URL hash和HTML5 history实现长尾关键词的页面跳转？

本文共计647个文字，预计阅读时间需要3分钟。

`hash_5_history.js` 是一个用于实现哈希历史记录功能的库。它允许通过修改哈希值来改变浏览器的历史记录，而不需要重新加载页面。以下是该库的主要功能概述：

- 自动添加到浏览器历史记录：当哈希值发生变化时，该变化会自动添加到浏览器的访问历史记录中。- `pushHash(path)` 方法：用于更新当前哈希值，并添加新的历史记录条目。 javascript function pushHash(path) { window.location.hash=path; } - `replace()` 方法与 `push()` 方法的比较：`replace()` 方法用于替换当前历史记录条目，而 `push()` 方法则添加新的历史记录条目。

这个库通过巧妙地使用哈希值和浏览器的历史记录机制，为单页应用（SPA）提供了流畅的用户体验。

hash_html5_history.js

/** * HashHistory * @link zhuanlan.zhihu.com/p/27588422 */ // hash的改变会自动添加到浏览器的访问历史记录中。 function pushHash (path) { window.location.hash = path } // replace()方法与push()方法不同之处在于，它并不是将新路由添加到浏览器访问历史的栈顶，而是替换掉当前的路由 function replaceHash (path) { const i = window.location.href.indexOf('#') window.location.replace( window.location.href.slice(0, i >= 0 ? i : 0) + '#' + path ) } // 用户还可以直接在浏览器地址栏中输入改变路由. SO, 可以为hash的改变添加监听事件 // window.addEventListener("hashchange", funcRef, false) window.addEventListener('hashchange', () => { if (!ensureSlash()) { return } this.transitionTo(getHash(), route => { replaceHash(route.fullPath) }) }) function ensureSlash (): boolean { const path = getHash() if (path.charAt(0) === '/') { return true } replaceHash('/' + path) return false } export function getHash (): string { const href = window.location.href const index = href.indexOf('#') return index === -1 ? '' : href.slice(index + 1) } /** * HTML5History * HTML5开始，History interface提供了两个新的方法：pushState(), replaceState() 使得我们可以对浏览器历史记录栈进行修改 * @link zhuanlan.zhihu.com/p/27588422 */ // // stateObject: 当浏览器跳转到新的状态时，将触发popState事件，该事件将携带这个stateObject参数的副本 // title: 所添加记录的标题 // URL: 所添加记录的URL window.history.pushState(stateObject, title, URL) window.history.replaceState(stateObject, title, URL) // src/util/push-state.js export function pushState (url?: string, replace?: boolean) { saveScrollPosition() // try...catch the pushState call to get around Safari // DOM Exception 18 where it limits to 100 pushState calls const history = window.history try { if (replace) { history.replaceState({ key: _key }, '', url) } else { _key = genKey() history.pushState({ key: _key }, '', url) } } catch (e) { window.location[replace ? 'replace' : 'assign'](url) } } export function replaceState (url?: string) { pushState(url, true) } // 在HTML5History中添加对修改浏览器地址栏URL的监听 window.addEventListener('popstate', e => { const current = this.current this.transitionTo(getLocation(this.base), route => { if (expectScroll) { handleScroll(router, route, current, true) } }) }) ensureURL (push?: boolean) { if (getLocation(this.base) !== this.current.fullPath) { const current = cleanPath(this.base + this.current.fullPath) push ? pushState(current) : replaceState(current) } } export function getLocation (base: string): string { let path = window.location.pathname if (base && path.indexOf(base) === 0) { path = path.slice(base.length) } return (path || '/') + window.location.search + window.location.hash }