vue router实现原理

Posted 2021-09-06 赏花赏景赏时光

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