vue-router路由跳转原理

Posted 2023-03-13

参考技术A 突发奇想，vue-router做单页面应用的时候是如何保证路由跳转的呢？

源码中有两种模式，一种的history模式，另一种是hash模式。

其中abstract模式的应用场景应该是服务端渲染的时候，暂不考虑

以history模式为例，要实现一个完整的路由跳转，会经过如下路径：

    history.transition() -> history.confirmTransition() ->history.update(route)->app._route=route 

其中当app._route=route此时会触发vue组件的re-render,那么为什么呢？

因为

在这个地方使用vue的工具函数，使得_route属性被劫持，当_router初始赋值get时就已经收集了vm._watcher,该watcher是专门用来render该vm实例的，所有当app._router=router时就触发了re-render,通过router-view函数式组件render出匹配的组件。其中this._router.init(this)就是将app=this.

当然为了适应用户通过前进后退来进行单页切换的场景，vue-router里通过监听popstate事件来触发跳转

当然，在路由跳转过去中，vue-router底层通过对前后的组件进行比较判断出deactived,actived,updated的组件，然后提供组件切换过程的一些钩子函数，辅助开发者进行特性开发

如下：

文笔不怎么地，求踩！！！！！！