vue-router的简单理解

Vue-router原理了解一下：

找到一篇文章，分析的很透彻从vue-router看前端路由的两种实现，文章写的很好，看完这篇文章 ➕ 看源码应该可以理解，这里根据我浅显的理解概括一下：

vue-router通过hash与History interface两种方式实现前端路由，更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式

hash---- 利用URL中的hash（“#”）
利用Historyinterface在 HTML5中新增的方法, 详情点击

那么，我们要选择用哪种方式呢？

在vue-router中，它提供mode参数来决定采用哪一种方式，选择流程如下:

mode 参数：

默认hash
history 注：如果浏览器不支持history新特性,则采用hash方式
如果不在浏览器环境则使用abstract（node环境下）

当你选择mode类型之后，程序会根据你选择的mode 类型创建不同的history对象(HashHistory或HTML5History或AbstractHistory)

我们看看源码就知道了

 // 根据mode确定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}`)

    }

}

HashHistory

HashHistory真是身怀绝技，会很多东西。特别是替换路由特别厉害。还可以通过不同的方式，一个是 push ，一个是 replace .

两个方法：HashHistory.push() 和 HashHistory.replace()

HashHistory.push()将新路由添加到浏览器访问历史的栈顶

从设置路由改变到视图更新的流程：

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

解析：

1 $router.push() //调用方法

2 HashHistory.push() //根据hash模式调用,设置hash并添加到浏览器历史记录（添加到栈顶）（window.location.hash= XXX）

3 History.transitionTo() //监测更新，更新则调用History.updateRoute()

4 History.updateRoute() //更新路由

5 {app._route= route} //替换当前app路由

6 vm.render() //更新视图

HashHistory.replace()

replace()方法与push()方法不同之处在于，它并不是将新路由添加到浏览器访问历史的栈顶，而是替换掉当前的路由

replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {

  this.transitionTo(location, route => {

    replaceHash(route.fullPath)

    onComplete && onComplete(route)

  }, onAbort)

}

function replaceHash (path) {

  const i = window.location.href.indexOf('#')

  window.location.replace(

    window.location.href.slice(0, i >= 0 ? i : 0) + '#' + path

  )

}

领教了HashHistory的超能力，接下来看下

HTML5History

History interface是浏览器历史记录栈提供的接口，通过back(), forward(), go()等方法，我们可以读取浏览器历史记录栈的信息，进行各种跳转操作。

从HTML5开始，History interface有进一步修炼：pushState(), replaceState() 这下不仅是读取了，还可以对浏览器历史记录栈进行修改：

window.history.pushState(stateObject, title, URL)window.history.replaceState(stateObject, title, URL)

stateObject: 当浏览器跳转到新的状态时，将触发popState事件，该事件将携带这个stateObject参数的副本
title: 所添加记录的标题
URL: 所添加记录的URL

1.push

与hash模式类似，只是将window.hash改为history.pushState

2.replace

与hash模式类似，只是将window.replace改为history.replaceState

3.监听地址变化

在HTML5History的构造函数中监听popState（window.onpopstate）

两种模式比较

在一般的需求场景中，hash模式与history模式是差不多的，但几乎所有的文章都推荐使用history模式，理由竟然是："#" 符号太丑...0_0 "

如果不想要很丑的 hash，我们可以用路由的 history 模式 ——官方文档

当然，严谨的我们肯定不应该用颜值评价技术的好坏。根据MDN的介绍，调用history.pushState()相比于直接修改hash主要有以下优势：

pushState设置的新URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，故只可设置与当前同文档的URL
pushState设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；而hash设置的新值必须与原来不一样才会触发记录添加到栈中
pushState通过stateObject可以添加任意类型的数据到记录中；而hash只可添加短字符串
pushState可额外设置title属性供后续使用

作者：Searchen
链接：https://www.jianshu.com/p/4295aec31302
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。