history和hash，vue-router

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
   

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

   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 我在桌上刻个早字 谢谢啦