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模式与哈希模式原理的更多相关文章

  1. 在nginx上部署vue项目(history模式)；

    在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...

  2. 在nginx上部署vue项目(history模式)--demo实列；

    在很早之前,我写了一篇 关于 在nginx上部署vue项目(history模式) 但是讲的都是理论,所以今天做个demo来实战下.有必要让大家更好的理解,我发现搜索这类似的问题还是挺多的,因此在写一篇 ...

  3. Laravel+vue实现history模式URL可行方案

    项目:laravel + vue 实现前后端分离.vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. h ...

  4. Vue项目history模式下微信分享总结

    原文 : http://justyeh.top/post/39/ 2019-07-02 Vue微信分享 每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信 ...

  5. K8s nginx-ingress 如何配置二级目录转发远程静态服务器基于Vue路由history模式打包的应用程序

    背景 首先这标题有点绕,我先解释下: 首先我们有静态服务器,上面某个目录有Vue路由history模式打包的应用程序(也就是build后的产物): 但是静态服务器一般不做对外域名用的,我们需要在k8s ...

  6. vue打包---放到服务器下（一个服务器多个项目需要配置路径），以及哈希模式和历史模式的不同配置方法

    哈希模式,好用,不需要服务器配合分配路径指向,自己单机就可以打开了 接下来上代码截图 接下来开始截图 历史模式 历史模式需要后端支持 打包后自己直接点击是打不开的 截图如下

  7. Vue路由History模式分析

    Vue路由History模式分析 Vue-router是Vue的核心组件,主要是作为Vue的路由管理器,Vue-router默认hash模式,通过引入Vue-router对象模块时配置mode属性可以 ...

  8. 轻松掌握：JavaScript代理模式、中介者模式

    代理模式.中介者模式 代理模式 在面向对象设计中,有一个单一职责原则,指就一个类(对象.函数)而言,应该仅有一个引起它变化的原因.如果一个对象承担了过多的职责,就意味着它将变得巨大,引起它变化的原因就 ...

  9. MVC+EF 理解和实现仓储模式和工作单元模式

    MVC+EF 理解和实现仓储模式和工作单元模式 原文:Understanding Repository and Unit of Work Pattern and Implementing Generi ...

  10. MySQL+MGR 单主模式和多主模式的集群环境 - 部署手册 (Centos7.5)

    MySQL Group Replication(简称MGR)是MySQL官方于2016年12月推出的一个全新的高可用与高扩展的解决方案.MGR是MySQL官方在5.7.17版本引进的一个数据库高可用与 ...

随机推荐

  1. k8s安全之Network Policy

    K8s Network Policy 是一种资源,它用于在 Pod 之间以及从其他网络实体到 Pod 的通信中进行网络级别的访问控制.它允许您定义一组规则,这些规则可以指定允许或拒绝网络流量. 具体来 ...

  2. UDP可靠传输协议KCP的一些理解

    UDP主要用在哪两个方面 游戏 音视频通话 为什么要使用UDP? 实时性的考虑,丢包重传,TCP协议栈重传无法控制,UDP重发可以自定义策略. 在DNS查询的时候,也使用UDP,对资源的考虑. 如何做 ...

  3. day03-分析SpringBoot底层机制

    分析SpringBoot底层机制 Tomcat启动分析,Spring容器初始化,Tomcat如何关联Spring容器? 1.创建SpringBoot环境 (1)创建Maven程序,创建SpringBo ...

  4. 一个简单的RTMP服务器实现 --- RTMP与FLV

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文作为本人csdn blog的主站的备份.(Bl ...

  5. [leetcode 496. 下一个更大元素 I] 单调栈

    单调栈的写法: import java.util.ArrayDeque; import java.util.Deque; import java.util.HashMap; import java.u ...

  6. 第144篇:阿里低开项目 init方法

    好家伙,  demo-general项目运行后主界面如下   解析阿里低开引擎中的初始化方法init 拆解项目来自阿里的lowcode engine目录下的 demo general项目 0.找到入口 ...

  7. .NET分布式Orleans - 7 - Streaming

    概念 在Orleans中,Streaming是一组API和功能集,它提供了一种构建.发布和消费数据流的方式. 这些流可以是任何类型的数据,从简单的消息到复杂的事件或数据记录.Streaming API ...

  8. .net 发邮件的小工具，包含json，环境变量，命令行参数三种配置方式

    一.业务需求 在工作中遇到一个场景,软件bug或功能发布之后,会通知测试进行测试,要求写一个小工具能自动发送邮件,功能包含发送和抄送支持多个,因为只是通知没有写进附件功能,这个其他博客都有搜一下就可以 ...

  9. 微服务集成Spring Cloud Alibaba Seata (二) 客户端连接

    通过上篇文章后我们的Seata服务就部署成功了,如果还不清楚怎么部署或者还没有部署Seata服务的朋友可以看我写的上篇文章进行服务部署.Seata部署步骤:https://www.cnblogs.co ...

  10. #保序回归问题，单调栈，二分#洛谷 5294 [HNOI2019]序列

    题目 给定一个长度为 \(n\) 的序列 \(A\),以及 \(m\) 个操作,每个操作将一个 \(A_i\) 修改为 \(k\). 第一次修改之前及每次修改之后,都要求你找到一个同样长度为 \(n\ ...