history和hash,vue-router

4

history

window.history(可直接写成history)指向History对象,它表示当前窗口的浏览历史。History对象保存了当前窗口访问过的所有页面网址

  1. history对象的常见属性和方法
    go()
    接受一个整数为参数,移动到该整数指定的页面,比如history.go(1)相当于history.forward(),history.go(-1)相当于history.back(),history.go(0)相当于刷新当前页面
    back()
    移动到上一个访问页面,等同于浏览器的后退键,常见的返回上一页就可以用back(),是从浏览器缓存中加载,而不是重新要求服务器发送新的网页
    forward()
    移动到下一个访问页面,等同于浏览器的前进键
    pushState()
    在浏览器历史中添加记录,方法接受三个参数,以此为:

    history.pushstate(state,title,url)
    
    if(!!(window.hostory && history.pushState)) {
    // 支持History API
    } else {
        // 不支持
    }

    state: 一个与指定网址相关的状态对象,popState事件触发时,该对象会传入回调函数,如果不需要这个对象,此处可填null
    title: 新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填null
    url: 新的网址,必须与当前页面处在同一个域,浏览器的地址栏将显示这个网址

    history.pushState({a:1},'page 2','2.html')

    用上面代码添加2.html后,浏览器地址栏立刻显示2.html,但不会跳到2.html,只会更新浏览器历史记录,此时点击后退按钮则会回到原网页,但是会改变history的length属性;
    如果pushState的url参数,设置了一个新的锚点值(即hash),并不会触发hashChange事件,如果设置了一个跨域网址,则会报错。

    replaceState()
    history.replaceState()方法的参数和pushState()方法一摸一样,区别是它修改浏览器历史当中的记录
    两者的区别在于
    push
    此时执行history.back()返回/about
    clipboard.png

    replace
    此时执行history.back()返回/blog
    clipboard.png

    length
    history.length属性保存着历史记录的url数量,初始时该值为1,如果当前窗口先后访问了三个网址,那么history对象就包括3项,history.length=3
    state
    返回当前页面的state对象。可以通过replaceState()和pushState()改变state,可以存储很多数据
    scrollRestoration
    history.scrollRestoration = 'manual';关闭浏览器自动滚动行为
    history.scrollRestoration = 'auto';打开浏览器自动滚动行为(默认)
    popState 事件
    每当同一个文档的浏览历史(即history)出现变化时,就会触发popState事件
    需要注意:仅仅调用pushState方法或replaceState方法,并不会触发该事件,只有用户点击浏览器后退和前进按钮时,或者使用js调用back、forward、go方法时才会触发。另外该事件只针对同一个文档,如果浏览历史的切换,导致加载不同的文档,该事件不会被触发
    使用的时候,可以为popState事件指定回调函数

    window.onpopstate = function (event) {
          console.log('location: ' + document.location);
          console.log('state: ' +JSON.stringify(event.state));
        };
        
        // 或者
        
        window.addEventListener('popstate', function(event) {
          console.log('location: ' + document.location);
          console.log('state: ' + JSON.stringify(event.state));
        });

    回调函数的参数是一个event事件对象,它的state属性指向pushState和replaceState方法为当前url所提供的状态对象(即这两个方法的第一个参数)。上边代码中的event.state就是通过pushState和replaceState方法为当前url绑定的state对象
    这个state也可以直接通过history对象读取
    history.state
    注意:页面第一次加载的时候,浏览器不会触发popState事件

hash

hash 就是指 url 尾巴后的 # 号以及后面的字符。这里的 # 和 css 里的 # 是一个意思。hash 也 称作 锚点,本身是用来做页面定位的,她可以使对应 id 的元素显示在可视区域内。

通过window.location.hash获取hash值

延伸:
window.location对象里面
hash : 设置或返回从 (#) 开始的 URL(锚)。
host : 设置或返回主机名和当前 URL 的端口号。
hostname:设置或返回当前 URL 的主机名。
href : 设置或返回完整的 URL。
pathname: 设置或返回当前 URL 的路径部分。
port:设置或返回当前 URL 的端口号。
search : 设置或返回从问号 (?) 开始的 URL(查询部分)。
assign() : 加载新的文档。
reload() : 重新加载当前文档。
replace() : 用新的文档替换当前文档。
hashchange

当hash值改变时会触发这个事件,
if('onhashchange' in window) {
   window.addEventListener('hashchange',function(e){
    console.log(e.newURL,e.oldURL)
},false)
}

vue-router

在vue-router中,它提供mode参数来决定采用哪一种方式;
默认是hash,可以配置mode:history,选择history模式;
选好mode后 vueRouter中会创建history对象(HashHistory或HTML5History,这两种类都是继承History类,这个类定义了一些公共方法)

// 根据mode确定history实际的类并实例化
    switch (mode) {
      case 'history':
        this.history = new HTML5History(this, options.base)
        break
      case 'hash':
        this.history = new HashHistory(this, options.base, this.fallback)
        break
      case 'abstract':
        this.history = new AbstractHistory(this, options.base)
        break
      default:
        if (process.env.NODE_ENV !== 'production') {
          assert(false, `invalid mode: ${mode}`)
        }
    }
  }

现在我们来看当我们在代码中执行了this.$router.push()之后具体的流程

首先看HashHistory
1 $router.push() //显式调用方法
2 HashHistory.push() // 我们来看下push方法

push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  this.transitionTo(location, route => {
    pushHash(route.fullPath)
    onComplete && onComplete(route)
  }, onAbort)
}

function pushHash (path) {
  window.location.hash = path
}

transitionTo()方法是父类中定义的是用来处理路由变化中的基础逻辑的,push()方法最主要的是对window的hash进行了直接赋值:hash的改变会自动添加到浏览器的访问历史记录中。

window.location.hash = route.fullPath //类似/thunder/bless_sort/1?fromType=homeTap

那么视图的更新是怎么实现的呢,我们来看父类History中transitionTo()方法的这么一段:

transitionTo (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  const route = this.router.match(location, this.current)
  this.confirmTransition(route, () => {
    this.updateRoute(route)
    ...
  })
}

updateRoute (route: Route) {
  
  this.cb && this.cb(route)
  
}

listen (cb: Function) {
  this.cb = cb
}

路由变化后会执行updateRoute(),其实是执行this.cb ,而 this.cb是在listen函数中被执行的,那么在那里调用listen函数呢

init (app: any /* Vue component instance */) {
    
  this.apps.push(app)

  history.listen(route => {
    this.apps.forEach((app) => {
      app._route = route
    })
  })
}

app为vue组件实例,vue本身是没有vue-routerd的,需要在组件中挂载这个属性

export function install (Vue) {
  
  Vue.mixin({
    beforeCreate () {
      if (isDef(this.$options.router)) {
        this._router = this.$options.router
        this._router.init(this)
        Vue.util.defineReactive(this, '_route', this._router.history.current)
      }
      registerInstance(this, this)
    },
  })
}

通过Vue.mixin()方法,全局注册一个混合,影响注册之后所有创建的每个 Vue 实例,该混合在beforeCreate钩子中通过Vue.util.defineReactive()定义了响应式的_route属性(当前的路由)。即当_route值改变时,会自动调用Vue实例的render()方法,更新视图。
总结一下,从设置路由改变到视图更新的流程如下:

$router.push() --> HashHistory.push() --> History.transitionTo() --> History.updateRoute() --> {app._route = route} --> vm.render()

replace方法
功能: 替换当前路由并更新视图,常用情况是地址栏直接输入新地址
流程与push基本一致
但流程2变为替换当前hash (window.location.replace= XXX)
replace和hash的区别在于它并不是将新路由添加到浏览器访问历史的栈顶,而是替换掉当前的路由:如上图

监听地址栏
以上讨论的VueRouter.push()和VueRouter.replace()是可以在vue组件的逻辑代码中直接调用的,除此之外在浏览器中,用户还可以直接在浏览器地址栏中输入改变路由,因此VueRouter还需要能监听浏览器地址栏中路由的变化,并具有与通过代码调用相同的响应行为。在HashHistory中这一功能通过setupListeners实现:

setupListeners () {
  window.addEventListener('hashchange', () => {
    if (!ensureSlash()) {
      return
    }
    this.transitionTo(getHash(), route => {
      replaceHash(route.fullPath)
    })
  })
}

该方法设置监听了浏览器事件hashchange,调用的函数为replaceHash,即在浏览器地址栏中直接输入路由相当于代码调用了replace()方法

而在HTML5History具体又是怎样的呢
代码结构以及更新视图的逻辑与hash模式基本类似,只不过将对window.location.hash直接进行赋值window.location.replace()改为了调用history.pushState()和history.replaceState()方法。
在HTML5History中添加对修改浏览器地址栏URL的监听是直接在构造函数中执行的:监听popState事件(地址栏变化触发window.onpopstate),调用repalce方法

 constructor (router: Router, base: ?string) {
      
      window.addEventListener('popstate', e => {
        const current = this.current
        this.transitionTo(getLocation(this.base), route => {
          if (expectScroll) {
            handleScroll(router, route, current, true)
          }
        })
      })
    }

除此之外vue-router还为非浏览器环境准备了一个abstract模式,其原理为用一个数组stack模拟出浏览器历史记录栈的功能。以上是vue-router的核心逻辑;

两种模式对比
History模式的优点:
1.History模式的地址栏更美观。。。
2.History模式的pushState、replaceState参数中的新URL可为同源的任意URL(可为不同的html文件),而hash只能是同一文档
3.History模式的pushState、replaceState参数中的state可为js对象,能携带更多数据
4.History模式的pushState、replaceState参数中的title能携带字符串数据(当然,部分浏览器,例如firefox不支持title,一般title设为null,不建议使用)
缺点:
不过这种模式需要后端配置,因为我们这个页面是单页面应用,如果用户直接访问http://oursite.com/user/id
后台没有正确的配置,则就会返回404,
这个时候需要后台配置一个能够覆盖所有情况的候选资源,如果url匹配不到任何静态资源时,则要返回同一个index.html;

注:该篇文章参考了https://zhuanlan.zhihu.com/p/...
转载请注明作者 : crystal 我在桌上刻个早字 谢谢啦

你可能感兴趣的

写的真好

回复

载入中...