{"id":3350,"date":"2022-08-06T23:17:33","date_gmt":"2022-08-06T15:17:33","guid":{"rendered":"http:\/\/www.yuguoxy.com\/geekhome\/?p=3350"},"modified":"2026-08-18T12:35:35","modified_gmt":"2026-08-18T04:35:35","slug":"hash%e8%b7%af%e7%94%b1%e5%92%8chistory%e8%b7%af%e7%94%b1%e5%8e%9f%e7%90%86","status":"publish","type":"post","link":"https:\/\/ai.zhousir.top\/?p=3350","title":{"rendered":"hash\u8def\u7531\u548chistory\u8def\u7531\u539f\u7406"},"content":{"rendered":"
\n

\u9762\u8bd5 Vue \u65f6\uff0c\u8def\u7531\u51e0\u4e4e\u5fc5\u95ee\uff1a\u6709\u54ea\u4e24\u79cd\u6a21\u5f0f\uff1f\u533a\u522b\u662f\u4ec0\u4e48\uff1f\u518d\u5f80\u4e0b\u5c31\u4f1a\u95ee\u5b9e\u73b0\u539f\u7406\uff0c\u751a\u81f3\u8ba9\u4f60\u624b\u5199\u4e00\u4e2a\u3002 \u5e38\u89c1\u7b54\u6848\u662f hash<\/strong> \u548c history<\/strong>\u3002hash \u5403\u7684\u662f URL \u91cc #<\/code> \u540e\u9762\u7684\u951a\u70b9\uff1bhistory \u5403\u7684\u662f history.pushState<\/code> \/ replaceState<\/code>\u3002<\/p>\n

hash \u4ece #a<\/code> \u5207\u5230 #b<\/code> \u65f6\u9875\u9762\u4e0d\u5237\u65b0\uff0c\u53ea\u6362\u951a\u70b9\u3002 history \u5219\u6539\u8def\u5f84\u672c\u8eab\uff0c\u9700\u8981\u670d\u52a1\u7aef\u628a\u6240\u6709\u524d\u7aef\u8def\u7531\u90fd\u56de\u843d\u5230\u540c\u4e00\u5f20 HTML\uff0c\u5426\u5219\u76f4\u5f00 \/about<\/code> \u4f1a 404\u3002\u539f\u6587\u628a API \u5199\u6210 putState\uff0c\u6807\u51c6\u540d\u5b57\u662f pushState<\/code>\u3002<\/p>\n

\"Snipaste_2022-08-06_23-21-16\"<\/a><\/p>\n

\u4e00\u3001\u4e24\u79cd\u6a21\u5f0f\u5bf9\u6bd4<\/h2>\n\n\n\n\n\n\n\n\n
<\/th>\nhash<\/th>\nhistory<\/th>\n<\/tr>\n<\/thead>\n
URL \u5f62\u6001<\/td>\nexample.com\/#\/home<\/code><\/td>\nexample.com\/home<\/code><\/td>\n<\/tr>\n
\u5207\u6362\u624b\u6bb5<\/td>\nhashchange<\/code> \/ \u6539 location.hash<\/code><\/td>\npushState<\/code> \/ replaceState<\/code><\/td>\n<\/tr>\n
\u5237\u65b0\u76f4\u5f00\u5b50\u8def\u5f84<\/td>\n\u4e00\u822c\u6ca1\u95ee\u9898\uff0c# \u540e\u4e0d\u53d1\u7ed9\u670d\u52a1\u7aef<\/td>\n\u9700\u8981\u670d\u52a1\u7aef fallback<\/td>\n<\/tr>\n
\u89c2\u611f<\/td>\n\u5e26 #\uff0c\u7565\u300c\u8001\u300d<\/td>\n\u66f4\u50cf\u771f\u5b9e\u8def\u5f84<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u4e8c\u3001\u624b\u5199 hash \u8def\u7531<\/h2>\n

index.html \u91cc\uff0c\u94fe\u63a5\u76f8\u5f53\u4e8e router-link<\/code>\uff0c#router-view<\/code> \u76f8\u5f53\u4e8e router-view<\/code>\uff1a<\/p>\n

<body>\n    <!-- \u76f8\u5f53\u4e8e router-link -->\n    <a href=\".\/#home\">\u9996\u9875<\/a> | <a href=\".\/#about\">\u5173\u4e8e\u6211\u4eec<\/a> | <a href=\".\/#introduce\">\u516c\u53f8\u4ecb\u7ecd<\/a>\n    <!-- \u8def\u7531\u8f93\u51fa \u76f8\u5f53\u4e8erouter-view -->\n    <div id=\"router-view\"><\/div>\n\n    <script src=\".\/js\/router.js\"><\/script>\n<\/body><\/code><\/pre>\n
router.js \u7684\u7ed3\u6784\u523b\u610f\u8d34\u8fd1 Vue Router\uff1a\u8def\u7531\u8868 + \u6839\u636e hash \u627e\u7ec4\u4ef6 + \u76d1\u542c hashchange<\/code>\uff1a<\/p>\n
const importCom = (id, text) => {\n\tconst el = document.createElement('div')\n\tel.id = id\n\tel.innerHTML = text\n\treturn el\n}\n\nconst routes = [\n\t{ path: 'home', component: importCom('home', '\u6b22\u8fce\u5149\u4e34\u516c\u53f8\u9996\u9875') },\n\t{ path: 'about', component: importCom('about', '\u4ee5\u5ba2\u6237\u4e3a\u4e2d\u5fc3\uff0c\u4ee5\u594b\u6597\u8005\u4e3a\u672c!') },\n\t{ path: 'introduce', component: importCom('introduce', '\u4e92\u8054\u7f51\u77e5\u540d\u4f01\u4e1a') },\n\t{ path: 'notFound', component: importCom('notFound', '\u9875\u9762\u4e0d\u80fd\u627e\u5230!') },\n]\n\nconst router = () => {\n\tconst url = location.hash.slice(1) || 'home'\n\tconst rootEle = document.querySelector('#router-view')\n\trootEle.innerHTML = ''\n\tconst childEle = routes.find(item => item.path == url)?.component\n\trootEle.appendChild(childEle ? childEle : routes.find(item => item.path == 'notFound')?.component)\n}\n\nrouter()\nwindow.addEventListener('hashchange', router)<\/code><\/pre>\n
\u6d4f\u89c8\u5668\u6253\u5f00 index.html \u5373\u53ef\u9a8c\u8bc1\u5207\u6362\uff1a<\/p>\n
\"hash\"<\/a><\/p>\n
\u4e09\u3001\u624b\u5199 history \u8def\u7531<\/h2>\n
\u94fe\u63a5\u4e0d\u518d\u5e26 #<\/code>\u3002\u70b9\u51fb\u65f6 preventDefault<\/code>\uff0c\u518d\u7528 history.pushState<\/code> \u6539\u8def\u5f84\u5e76\u8c03\u7528 router()<\/code>\u3002 \u522b\u5fd8\u4e86\u6267\u884c router()<\/code>\uff0c\u5426\u5219\u5730\u5740\u53d8\u4e86\u89c6\u56fe\u4e0d\u53d8\u3002<\/p>\n
<body>\n    <!-- \u76f8\u5f53\u4e8e router-link -->\n    <nav id='nav'>\n       <a href=\".\/home\">\u9996\u9875<\/a> | <a href=\".\/about\">\u5173\u4e8e\u6211\u4eec<\/a> | <a href=\".\/introduce\">\u516c\u53f8\u4ecb\u7ecd<\/a>\n    <\/nav>\n    <!-- \u8def\u7531\u8f93\u51fa \u76f8\u5f53\u4e8erouter-view -->\n    <div id=\"router-view\"><\/div>\n\n    <script src=\".\/js\/router.js\"><\/script>\n<\/body><\/code><\/pre>\n
const importCom = (id, text) => {\n\tconst el = document.createElement('div')\n\tel.id = id\n\tel.innerHTML = text\n\treturn el\n}\n\nconst routes = [\n\t{ path: 'home', component: importCom('home', '\u6b22\u8fce\u5149\u4e34\u516c\u53f8\u9996\u9875') },\n\t{ path: 'about', component: importCom('about', '\u4ee5\u5ba2\u6237\u4e3a\u4e2d\u5fc3\uff0c\u4ee5\u594b\u6597\u8005\u4e3a\u672c!') },\n\t{ path: 'introduce', component: importCom('introduce', '\u4e92\u8054\u7f51\u77e5\u540d\u4f01\u4e1a') },\n\t{ path: 'notFound', component: importCom('notFound', '\u9875\u9762\u4e0d\u80fd\u627e\u5230!') },\n]\n\nconst router = () => {\n\tconst url = location.pathname.slice(1) || 'home'\n\tconst rootEle = document.querySelector('#router-view')\n\trootEle.innerHTML = ''\n\tconst childEle = routes.find(item => item.path == url)?.component\n\trootEle.appendChild(childEle ? childEle : routes.find(item => item.path == 'notFound')?.component)\n}\n\nconst navEle = document.querySelector('#nav')\nnavEle.addEventListener('click', function (e) {\n\tif (e.target.tagName == 'A') {\n\t\te.preventDefault()\n\t\tconst href = e.target.getAttribute('href').slice(1)\n\t\thistory.pushState(null, `\u9875\u9762\u6807\u9898`, href)\n\t\t\/\/ history.replaceState(null, `\u9875\u9762\u6807\u9898`, href)\n\t\trouter()\n\t}\n})<\/code><\/pre>\n
\u56db\u3001\u8fd8\u6709 memory \u6a21\u5f0f<\/h2>\n
React \u91cc\u4e5f\u80fd\u89c1\u5230 memory \u8def\u7531\uff1a\u4e0d\u4f9d\u8d56\u6d4f\u89c8\u5668 URL\uff0c\u9002\u5408\u975e\u6d4f\u89c8\u5668\u6216 App \u5185 WebView\u3002\u4f18\u70b9\u662f\u4e0d\u5fc5\u5237\u65b0\u3001\u4e0d\u5fc5\u66b4\u9732\u8def\u5f84\uff1b\u7f3a\u70b9\u662f\u4e0d\u80fd\u5206\u4eab\u5e26 URL \u7684\u94fe\u63a5\uff0c\u4e5f\u4e0d\u652f\u6301\u6d4f\u89c8\u5668\u524d\u8fdb\u540e\u9000\uff0c\u53ea\u5bf9\u5f53\u524d\u4f1a\u8bdd\u6709\u6548\u3002 \u5b9e\u73b0\u4e0a\u53ef\u628a history \u65b9\u6848\u91cc\u7684\u8def\u5f84\u5b58\u50a8\u6362\u6210 localStorage<\/code>\u3002<\/p>\n
\u76f8\u5173\u9605\u8bfb\uff1a\u4e24\u79cd\u524d\u7aef\u8def\u7531\uff08hash\u6a21\u5f0f\u548chistory\u6a21\u5f0f\uff09\u5b9e\u73b0\u539f\u7406\u89e3\u6790\u53ca\u533a\u522b<\/a>\u3002<\/p>\n
\n
\u4e00\u53e5\u8bdd\u603b\u7ed3\uff1ahash \u542c hashchange\uff0chistory \u542c pushState\uff1a\u4e24\u8005\u90fd\u662f\u300c\u6539\u5730\u5740\u4f46\u4e0d\u6574\u9875\u5237\u65b0\u300d\uff0c\u5dee\u5728 URL \u5f62\u6001\u548c\u5bf9\u670d\u52a1\u7aef\u7684\u8981\u6c42\u3002<\/strong><\/p>\n<\/blockquote>\n<\/section>\n","protected":false},"excerpt":{"rendered":"
\u9762\u8bd5 Vue \u65f6\uff0c\u8def\u7531\u51e0\u4e4e\u5fc5\u95ee\uff1a\u6709\u54ea\u4e24\u79cd\u6a21\u5f0f\uff1f\u533a\u522b\u662f\u4ec0\u4e48\uff1f\u518d\u5f80\u4e0b\u5c31\u4f1a\u95ee\u5b9e\u73b0\u539f\u7406\uff0c\u751a\u81f3\u8ba9\u4f60\u624b\u5199\u4e00\u4e2a\u3002 \u5e38\u89c1\u7b54\u6848\u662f […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[106,105],"tags":[205,117],"_links":{"self":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/3350"}],"collection":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3350"}],"version-history":[{"count":3,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/3350\/revisions"}],"predecessor-version":[{"id":3364,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/3350\/revisions\/3364"}],"wp:attachment":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3350"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3350"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}