欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

vue的俩种路由模式hash和history

程序员文章站 2022-03-25 09:52:19
...

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

history模式 则是利用html5中新增的 history.pushState({},’’,url);
就是更改地址栏的状态但是页面并不会发生变化。
这个我来举一个例子吧,看完例子应该就会懂了
vue的俩种路由模式hash和history

<!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>
相关标签： vue javascript

上一篇： 前端路由hash、history模式的区别及简单实现

下一篇： Vue-Router路由模式hash和history的区别

推荐阅读