vue router实现原理

Posted 赏花赏景赏时光

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue router实现原理相关的知识,希望对你有一定的参考价值。

vue router即通过改变url,在不重新请求页面的情况下,更新页面视图

vue router 方式有三种,通过mode去定义使用具体的路由模式,mode的值如下:

hash|history|abstract

一、实现方式:

hash模式

早期的前端路由跳转就是利用location.hash来实现的,像下面的链接,#及后面的内容一起组成hash的值

https://www.baidu.com.cn/index.html/#/content?id=1234

hash指示了加载页面的路径位置

1、hash模式的特性

1)hash虽然出现在url中,但它只是客户端的一种的表现,用来指导浏览器的动作,向服务端发送请求的时候,hash内容不会被发送给服务器。因此,改变hash不会重新加载页面

2)每次改变hash的时候,都会在浏览器的访问历史中添加一条记录

3)通过location.hash可以修改、获取hash值

4)通过hashchange事件可以监听hash的修改,从而作出相应的处理

2、hash模式的方法---push.  replace

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

replace()--------替换掉当前栈顶的路由

push:从设置路由到视图更新流程

    1、this.$router.push()  // 调用router的push方法
    2、hashHistory.push()   // 根据hash模式调用,设置 hash并添加到浏览器历史记录(栈顶)(window.location.hash=route.fullPath)
                            // hash 的改变会自动添加到浏览器的访问历史记录中
    3、History.transitionTo()  // 监测更新(是父类中定义的是用来处理路由变化中的基础逻辑的)。更新则调用 History.updateRoute()
    4、History.updateRoute()   // 更新路由
    5、app._route = route   // 替换当前app路由
    6、vm.render()          // 更新视图

history模式

history对象提供了go、 back、forward进行页面跳转,html5还提供了pushState、replaceState两个方法对浏览器历史记录栈进行修改

    // stateObject:当浏览器跳转到新的状态时,将触发 Popstate 事件,该事件将携带这个 stateObject 参数的副本
    // title:所添加记录的标题
    // url:所添加记录的 url
  window.history.pushState(stateObject,title,url)
  window.history,replaceState(stateObject,title,url)

1、history模式特性

1)通过history.pushState、history.replaceState修改url,pushState是往浏览器访问历史添加一条记录,replaceState是将当前栈顶历史记录进行替换

2)通过监听popstate事件,可以监听到浏览器地址变化

3)pushState、replaceState不会触发popstate事件,需要手动触发跳转

2、history模式存在的问题

history模式中链接少了#符号,使得路径变得好看,但是要用好history模式还得后台的配合,当页面刷新的时候会向服务器发送请求,这时候服务器要提供匹配路径的资源,当没有匹配到的时候要返回一个通用资源路径,否则页面会显示404

二、路由是如何获取到用户配置的路由信息的

vue-router是vue官方插件,vue里面提供了使用插件的方法,即Vue.use(plugin),plugin对象提供了install方法,在install里面可以通过Vue.mixin()混入beforeCreate(),在该钩子里面将用户配置的路由信息放到Vue.prototype的route对象上,这样vue实例就可以访问到用户配置的路由信息了

    install() {
      Vue.mixin({
          beforeCreate() {
            Vue.prototype.router = this.$options.router
          }
      })
    }

三、两种模式的区别

1、pushState设置新的URL可以是与当前URL同源的任意URL;而hash只可修改#后面的部分,故只可设置与当前

2、pushState设置的新URL可以与当前URL一模一样,这样也会把记录添加到栈中;而hash设置的新值必须与原来不一样才会触发记录添加到栈中的URL

3、pushState通过stateObject可以添加任意类型的数据到记录中;而hash只可添加短字符串

4、pushState可额外设置title属性供后续使用

参考文章:

https://zhuanlan.zhihu.com/p/27588422

https://www.cnblogs.com/gaosirs/p/10606266.html

以上是关于vue router实现原理的主要内容,如果未能解决你的问题,请参考以下文章

vue-router原理剖析之自行实现router

vue-router实现原理

Vue Router 实现原理

Vue路由实现:router-view和router-link的实现原理

Vue Router 路由实现原理实现原理

一文搞定vue-router实现原理