vue router实现原理

短命女 2022-09-04 14:43 145阅读 0赞

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_zhuanlan.zhihu.com_p_27588422]

[https://www.cnblogs.com/gaosirs/p/10606266.html][https_www.cnblogs.com_gaosirs_p_10606266.html]

[https_zhuanlan.zhihu.com_p_27588422]: https://zhuanlan.zhihu.com/p/27588422
[https_www.cnblogs.com_gaosirs_p_10606266.html]: https://www.cnblogs.com/gaosirs/p/10606266.html