comelong blog comelong blog
首页
  • html5
  • JavaScript
  • ES6
  • Vue
  • react
  • Node
  • PHP
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

comelong

永远相信技术的力量
首页
  • html5
  • JavaScript
  • ES6
  • Vue
  • react
  • Node
  • PHP
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • ES6

  • vue

    • vue基础详解
    • vue组件与路由
    • 组件通信与插槽
    • MVC与MVVM
    • vuex状态管理
    • TypeScript基础
    • vue进阶
    • Vue3新特性
    • Vue修饰符
    • VueRoute钩子函数
    • history与hash
      • history
      • hash
      • 原理
      • 实现
    • vue中文件导入&导出
  • h5

  • JavaScript

  • React

  • Git

  • webpack

  • js查漏补缺

  • uniapp

  • 组件封装

  • 前端
  • vue
comelong
2023-01-27
目录

history与hash

# history与hash

# history

history模式URL就要和后端进行一致,所以要改为history也需要后端的配合,否则会报错。 所以hash模式在每次刷新页面时是直接更改“#”后的东西,history每次刷新会重新像后端请求整个网址,也就是重新请求服务器。如果后端没有及时响应,就会报错404!。history的好处是可以进行修改历史记录,并且不会立刻像后端发起请求。不过如果对于项目没有硬性标准要求,我们可以直接使用hash模式开发。

# hash

  1. hash 就是指 url 后面的 # 号以及后面的字符,history没有带#,外观上比hash 模式好看些
  2. 原理的区别(原理)
  3. hash 能兼容到IE8, history 只能兼容到 IE10
  4. 由于 hash 值变化不会导致浏览器向服务器发出请求,而且 hash 改变会触发 hashchange 事件(hashchange只能改变 # 后面的url片段);虽然hash路径出现在URL中,但是不会出现在HTTP请求中,对后端完全没有影响,因此改变hash值不会重新加载页面,基本都是使用 hash 来实现前端路由的

# 原理

1.hash通过监听浏览器的 onhashchange() 事件变化,查找对应的路由规则

2.history原理: 利用H5的 history中新增的两个API pushState() 和 replaceState() 和一个事件onpopstate监听URL变化

# 实现

编辑 (opens new window)
上次更新: 2023/06/25, 09:27:47
VueRoute钩子函数
vue中文件导入&导出

← VueRoute钩子函数 vue中文件导入&导出→

最近更新
01
Api接口
07-30
02
分页组件
07-06
03
mongodb
05-07
更多文章>
Theme by Vdoing | Copyright © 2019-2023 comelong | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式