vue的history模式与哈希模式原理

hash模式

 <!--
 * @Author: dezhao.zhao@hand-china.com
 * @Date: 2021-10-26 17:52:25
 * @Description:  
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hash模式</title>
  </head>
  <body>
    <a href="#/home">home</a>
    <a href="#/about">about</a>
    <div id="content">default</div>
    <script>
      window.addEventListener('hashchange', () => {
        const content = document.getElementById('content')
        // 路径匹配显示
        window.location.hash === '#/home'
          ? (content.innerHTML = 'home')
          : (content.innerHTML = 'about')
      })
    </script>
  </body>
</html>

history模式

 <!--
 * @Author: dezhao.zhao@hand-china.com
 * @Date: 2021-10-26 18:01:35
 * @Description:  
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>history</title>
  </head>
  <body>
    <a href="/home">home</a>
    <a href="/about">about</a>
    <div id="content">default</div>
    <script>
      const content = document.getElementById('content')
      const aEls = document.getElementsByTagName('a')
      ;[...aEls].forEach((item) => {
        item.addEventListener('click', (e) => {
          // 阻止默认跳转时间
          e.preventDefault()
          const href = item.getAttribute('href')
          // 修改url
          history.pushState({}, '', href)
          // 也可以使用replaceState,但其不可以进行回退
          // 修改显示内容
          content.innerHTML = href
        })
      })
    </script>
  </body>
</html>

采用链接的默认跳转,会使浏览器按照新的url,再次向服务器请求资源,而服务器下,并没有该资源,导致404错误,通过history对象操作url不会使浏览器再次向服务器请求资源
并且history需要在服务器环境下才可以使用,不然会报错,可以通过vscode中liveserver插件搭建一个本地服务

posted @ 2024-04-15 09:45 story.Write(z) 阅读(10) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 框架hash/history实现简单原理

· vue2响应式原理

· vue路由模式 -hash history

· vue-router中的hash和history模式

· Vue Vue-router 中hash模式和history模式的关系

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？

公告

test

昵称： story.Write(z)
园龄： 10个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

coderzdz

个人记录

vue的history模式与哈希模式原理

hash模式

history模式

公告

搜索

常用链接

随笔分类 (83)

随笔档案 (81)

阅读排行榜

推荐排行榜

	<!--
	* @Author: dezhao.zhao@hand-china.com
	* @Date: 2021-10-26 17:52:25
	* @Description:
	-->
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Hash模式</title>
	</head>
	<body>
	<a href="#/home">home</a>
	<a href="#/about">about</a>
	<div id="content">default</div>
	<script>
	window.addEventListener('hashchange', () => {
	const content = document.getElementById('content')
	// 路径匹配显示
	window.location.hash === '#/home'
	? (content.innerHTML = 'home')
	: (content.innerHTML = 'about')
	})
	</script>
	</body>
	</html>

	<!--
	* @Author: dezhao.zhao@hand-china.com
	* @Date: 2021-10-26 18:01:35
	* @Description:
	-->
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>history</title>
	</head>
	<body>
	<a href="/home">home</a>
	<a href="/about">about</a>
	<div id="content">default</div>
	<script>
	const content = document.getElementById('content')
	const aEls = document.getElementsByTagName('a')
	;[...aEls].forEach((item) => {
	item.addEventListener('click', (e) => {
	// 阻止默认跳转时间
	e.preventDefault()
	const href = item.getAttribute('href')
	// 修改url
	history.pushState({}, '', href)
	// 也可以使用replaceState,但其不可以进行回退
	// 修改显示内容
	content.innerHTML = href
	})
	})
	</script>
	</body>
	</html>