vue的俩种路由模式hash和history

最新推荐文章于 2025-02-21 22:05:13 发布

yunchong_zhao

最新推荐文章于 2025-02-21 22:05:13 发布

阅读量350

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： javascript

本文链接：https://blog.csdn.net/yunchong_zhao/article/details/105974211

vue 专栏收录该内容

104 篇文章

订阅专栏

本文深入探讨了前端路由中Hash模式与History模式的区别。Hash模式使用#号进行路由跳转，而History模式则通过HTML5的history API实现无刷新页面状态变更。通过实例展示了两种模式的工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

hash模式是默认的，就是在地址栏访问上面有一个 #号
http://localhost:8081/#/home，http://localhost:8081/#/search
hash模式下默认的地址栏默认不会讲# 号后面的发送给服务器端
在发送之前前端会判断下将# 号后面的过滤掉
所以上面的就是 http://localhost:8081/

history模式则是利用html5中新增的 history.pushState({},’’,url);
就是更改地址栏的状态但是页面并不会发生变化。
这个我来举一个例子吧,看完例子应该就会懂了
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>history原理</title>
</head>
<body>
    <h1>history的演示</h1>
	<p id="msg"></p>
    <button id="home">跳转到首页页面</button>
    <button id="friend">跳转到好友页面</button>
    <script>
        home.onclick=function(){
			history.pushState({},'','/home');
			msg.innerHTML="我是首页页面";
		}
		friend.onclick=function(){
			history.pushState({},'','/friend');
			msg.innerHTML="我是好友页面";
		}
    </script>
</body>
</html>