vue-router

最新推荐文章于 2023-06-17 00:14:34 发布

晨梦天旭

最新推荐文章于 2023-06-17 00:14:34 发布

阅读量166

点赞数

分类专栏： vue 文章标签： vue-router原理

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue-router原理

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

hash ---- 利用URL中的hash（“#”）
利用History interface在 HTML5中新增的方法,。

在vue-router中，它提供mode参数来决定采用哪一种方式
mode参数：

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

1.内部实现

首先mode:'hash’为这种形式：

http://localhost:8080/#/recommend

mode:'history’这种形式：

http://localhost:8080/recommend

最重要的是程序会根据你选择的mode 类型创建不同的history对象(HashHistory或HTML5History或AbstractHistory)，

switch(mdoe){
  case:'hsitory':
    this.history = new HTML5History(this,options.base)
    break;
  case:'hash':
    this.history = new HashHistory(this,options.base,this,fallback);
  case 'abstract':
     this.history = new AbstractHistory(this, options.base)
     break
   default:
     if (process.env.NODE_ENV !== 'production') {
       assert(false, `invalid mode: ${mode}`)
     }
}

那么什么是HashHistory，HTML5History呢？

2.HashHistory
HashHistory通过不同的方式，一个是 push ，一个是 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
  )
}

3.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）

4.区别