参考:彻底搞懂路由跳转:location 和 history 接口

1、BOM对象

BOM(浏览器对象模型)中几个比较重要的对象:windowlocation,navigator

  1. window: BOM的核心对象,既是通过javascript访问浏览器窗口的一个接口,优势ECMAScript中规定的Global对象
  2. loaction: 最有用的BOM对象之一,且比较特殊的是,locaton既是window对象的属性,也是document对象的属性,换句话说,window.locationdocument.location引用的是同一个对象
  3. **navigator:**主要用于检测显示网页的浏览器类型。例如:客户端浏览器每次发送 HTTP 请求时,都会附带有一个 user-agent(用户代理)字符串,对于 Web 开发人员来说,可以使用用户代理字符串检测浏览器类型,BOM 在 navigator 对象中定义了 userAgent 属性,利用该属性可以捕获客户端 user-agent 字符串信息
2、浏览器提供的两大API
  1. window.location
    • location.href
    • location.hash
    • location.search
    • location.pathname
  2. window.history
    • history.pushState()
    • history.replaceState()
    • history.go()
    • history.back()
    • history.forward()
vue路由切换和用location切换url的区别

参考:vue路由切换和用location切换url的区别
总结:vue-router主要通过hash模式和history模式来实现页面跳转,根据mode的值创建不同的history对象:

  1. hash模式:创建HashHistory对象,每次hash值变化,会触发hashchange事件
    • HashHistory.push():将新路由添加到浏览器访问历史的栈顶
    • HashHistory.replace():替换到当前栈顶的路由
  2. history模式: 创建HTML5History对象,当浏览器跳转到新的状态,将触发popstate事件
    • history.pushState()
    • history.replaceState()
    • history.go()
    • history.back()
    • history.forward()
  3. abstract模式: 创建AbstractHistory对象
通过location接口:刷新了页面
  1. location.href : 赋值时只改变url的hash
  2. location.hash: 直接赋值
引进router,使用router.push():使用diff算法,实现了按需加载,减少DOM消耗
hash模式和history模式对比

参考:vue-router两种模式的区别

  1. pushState()设置新的url可以是和当前url同源的任意url;hash只可修改#后面的部分
  2. pushState()设置的新url可与当前url一致,这样也会把记录添加到栈中;hash必须设置与当前url不同的url的,才会触发动作将记录添加到栈中
  3. pushState()通过stateObject参数可以添加任意类型的数据到记录中;hash只可添加短字符串
  4. hash模式下,仅hash符号之前的url会被包含在请求中,后端如果没有做到对路由的全覆盖,也不会返回404错误
  5. history模式下,前端的url必须和实际向后端发起请求的url一致,若没有做到路由的全覆盖,会出现404
  6. history模式下,不怕前进,不怕后退,就怕f5刷新
Logo

前往低代码交流专区

更多推荐