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插件搭建一个本地服务
vue的history模式与哈希模式原理的更多相关文章
- 在nginx上部署vue项目(history模式);
在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...
- 在nginx上部署vue项目(history模式)--demo实列;
在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是讲的都是理论,所以今天做个demo来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...
- Laravel+vue实现history模式URL可行方案
项目:laravel + vue 实现前后端分离.vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. h ...
- Vue项目history模式下微信分享总结
原文 : http://justyeh.top/post/39/ 2019-07-02 Vue微信分享 每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信 ...
- K8s nginx-ingress 如何配置二级目录转发远程静态服务器基于Vue路由history模式打包的应用程序
背景 首先这标题有点绕,我先解释下: 首先我们有静态服务器,上面某个目录有Vue路由history模式打包的应用程序(也就是build后的产物): 但是静态服务器一般不做对外域名用的,我们需要在k8s ...
- vue打包---放到服务器下(一个服务器多个项目需要配置路径),以及哈希模式和历史模式的不同配置方法
哈希模式,好用,不需要服务器配合分配路径指向,自己单机就可以打开了 接下来上代码截图 接下来开始截图 历史模式 历史模式需要后端支持 打包后自己直接点击是打不开的 截图如下
- Vue路由History模式分析
Vue路由History模式分析 Vue-router是Vue的核心组件,主要是作为Vue的路由管理器,Vue-router默认hash模式,通过引入Vue-router对象模块时配置mode属性可以 ...
- 轻松掌握:JavaScript代理模式、中介者模式
代理模式.中介者模式 代理模式 在面向对象设计中,有一个单一职责原则,指就一个类(对象.函数)而言,应该仅有一个引起它变化的原因.如果一个对象承担了过多的职责,就意味着它将变得巨大,引起它变化的原因就 ...
- MVC+EF 理解和实现仓储模式和工作单元模式
MVC+EF 理解和实现仓储模式和工作单元模式 原文:Understanding Repository and Unit of Work Pattern and Implementing Generi ...
- MySQL+MGR 单主模式和多主模式的集群环境 - 部署手册 (Centos7.5)
MySQL Group Replication(简称MGR)是MySQL官方于2016年12月推出的一个全新的高可用与高扩展的解决方案.MGR是MySQL官方在5.7.17版本引进的一个数据库高可用与 ...
随机推荐
- nvm-windows 安装遇到的问题 node目录卸载后(有残留)记得改名
需求 网上好多新项目都需要最新版的node,所有需要切换node版本 nvm-windows https://github.com/coreybutler/nvm-windows 安装步骤-问题 删除 ...
- B站上传视频时各分辨率最佳的码率及格式参数
相关链接:表格源文件
- 24_用Qt和FFmpeg实现简单的YUV播放器
前面文章FFmpeg像素格式转换中我们使用FFmpeg实现了一个像素格式转换工具类,现在我们就可以在Qt中利用QImage很容易的实现一个简单的YUV播放器了. 播放器功能很简单,只有播放.暂停和停止 ...
- shell实现简单的数组排序
c++代码 int nums[8]={1,2,1,3,4,2,5,6}; int length=8; for(int i=0;i<length;i++){ for(int j=i+1;j< ...
- Locust 断言的实现?
一.检查点的方式有哪些: 主要是python 内置的assert 断言(自动断言)还有locust 中的catch_response 断言(手动断言):那么这两者之间有什么区别呢? 其实主要区别在与生 ...
- web前端工程化合集
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 一.Git 1. git 和 svn 的区别 git 和 svn 最大的区别在于 git 是分布式的,而 svn 是集中式的.因此我们不能 ...
- 记录--Three.js入门教程——教不会算我输
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 在javascript中使用Three.js设计并且实现3D场景是一个很有意思的事情,因为在浏览器中就能够渲染出3D场景,非常简单和轻便. ...
- [Spring]aop的配置与使用
[版权声明]未经博主同意,谢绝转载!(请尊重原创,博主保留追究权) https://blog.csdn.net/m0_69908381/article/details/129907717 出自[进步* ...
- 基于VB6的磁性移动窗体 - 开源研究系列文章
这次继续整理代码.这个磁性窗体是以前大学的时候开发的,当时模仿的Winamp的效果进行的编程.当时的时候有Windows API函数能够进行处理,但是XP的年代,那个API只是移动的虚框,而不是移动窗 ...
- nginx进阶-3(32-34天)学习笔记
nginx进阶-3(33-34天)学习笔记 知识回顾 1. nginx部署单机网站 2.nginx部署多个网站 3.nginx访问方式 4.nginx 安全 5.nginx加密访问 实战 00---n ...