详细解释Vue-Router源代码分析路由实现原理

深度分析路由实现原理在Vue-Router源代码

使用vue开发SPA应用离不开vue-router，那么Vue和vue-router如何协同运行呢？从使用的角度来看，下面的白话将帮助你一步步梳理vue-router的整个实现过程。

发布时使用的版本是：-vue (v2.5.0)-vue-router (v3.0.1)

1.vue-路由器源代码结构

Github地址：https://github.com/vuejs/vue-router

组件下面是两个组件：路由器视图和路由器链接

历史是路由方法的包装，它提供了三种方式

util下主要有各种函数类和函数

创建匹配器和创建路由器映射是生成的匹配表

Index是VueRouter类，也是整个插件的入口

安装提供了安装方法

首先，展示vue路由器的整体使用情况，请记住步骤。

从' vue '导入vue路由器从' vue-router'/导入vue路由器/如果插件是在浏览器环境下运行，就不能写这个方法Vue.use(VueRouter)//1。定义(路由)组件。//可以从其他文件导入。const User={ template : ' div User/div ' } const role={ template 3360 ' div role/div ' }//2。定义路由//Array，每个路由都应该映射一个组件。constructes=[{ path : '/user '，component:user}，{path:'/home '，component3360home}]//3。创建一个路由器实例并传递“routes”来配置constrouter=newvue路由器({ routes })//4//记得通过router对象给vue注入参数，//这样整个应用就有了路由功能。//使用路由器链接组件导航。//路由出口//与路由匹配的组件将在此呈现const app=new Vue({ router，template : ` div id=' app ' h1 basic/h1 ul外部-link to='/'//router-link/Li外部-link to='/user ' user/Router-link/Li外部-link to='/role ' role/Router-link/Li外部-link标记=' Li ' to='/user '/user/Router-link/ulrouter-view类=' view'/router-view/div$ mount(# app)分析开始

第一步

Vue使用。使用(plugins)方法将插件注入Vue。使用方法检测插入到插件VueRouter中的安装方法，如果是，则执行安装方法。注意：在浏览器环境中。use方法将在index.js中自动调用如果是基于节点环境，则需要手动调用。

解析if(inbrowserwindow . vue){ window . vue . use(vuerouter)} install(对应目录结构的install.js)

该方法主要做以下三件事：

1.将beforeCreate钩子操作混合到Vue实例中(它将在Vue的生命周期阶段被调用)；2.通过Vue.prototype定义路由器、路由器和路由属性(方便所有组件获取这两个属性)；3.在Vue上注册路由器链接和路由器视图组件。

导出函数安装(Vue){ if(install。installed _ Vue===Vue)返回安装。installed=true _ Vue=Vue const IsDef=v=v！==未定义的常量Registerinstance=(VM，callVal)={ let i=vm .$选项_ parentVnode if(IsDef(I)IsDef(I=I . data)IsDef(I=I . registerRouteinInstance)){ I(VM，callVal) } } Vue.mixin({ //对某视频剪辑软件实例混入创建前钩子操作beforeCREAte(){ if(IsDef)(这个.$ options . router)){ 0这个_ routerRoot=这个这个._路由器=这个$期权。路由器这个路由器。init(this)Vue。乌提尔。定义活动的(这个，' _ route '，这个._路由器。历史。current)} else { this ._ routerRoot=(这。$家长本。$家长_ RouterRot)| | this } registerInstance(this，this) }，explored(){ registerInstance(this)})//通过Vue。原型定义$路由器，$路由属性（方便所有组件可以获取这两个属性)对象。定义属性(vue。原型，' $router '，{ get () { return this ._ routerRoot ._ router } })对象。定义属性(vue。原型，' $route '，{ get () { return this ._ routerRoot ._route } }) //Vue上注册路由器链路和路由器视图两个组件Vue.component('RouterView '，View) Vue.component('RouterLink '，Link)const strats=vue。配置。选项合并策略/对路由钩子使用相同的钩子合并策略斯特拉斯。在routereter=strats之前。在routereleave=strats之前。在routereudate=strats之前。已创建}第二步生成路由器实例

常量路由器=新VueRouter({路由})生成实例过程中，主要做了以下两件事

1、根据配置数组（传入的路线)生成路由配置记录表。 2、根据不同模式生成监控路由变化的历史对象注：历史类由HTML5History、HashHistory、AbstractHistory三类继承history/base.js实现了基本历史的操作历史/hash.js，历史/html5.js和历史/摘要。射流研究…继承了基地，只是根据不同的模式封装了一些基本操作

第三步生成某视频剪辑软件实例

const app=new Vue({路由器，模板： ` div id=' app ' h1基本/h1 ul Li外部链接到='/'//路由器链接/Li Li外部链接到='/user '用户/路由器链接/李莉外部链接到="/角色"角色/router-link/li路由器链接标记='li '到='/user'/用户/router-link/ul router-view class=' view '/router-view/div ` }).$mount('#app ')代码执行到这，会进入某视频剪辑软件的生命周期，还记得第一步虚拟路由器对某视频剪辑软件混入了创建前钩子吗，在此会执行哦

Vue.mixin({ beforeCreate () { //验证某视频剪辑软件是否有路由器对象了，如果有，就不再初始化了if (isDef(this .$options.router)) { //没有路由器对象//将_ routerRoot指向根组件这个_ RouterRot=this//将路由器对象挂载到根组件元素_路由器上这个_路由器=这个$options.router //初始化，建立路由监控这个_router.init(this) //劫持数据_路由，一旦_路线数据发生变化后，通知路由器视图执行提出方法Vue.util.defineReactive(这，' _route '，这._路由器。历史。当前)} else {//如果有路由器对象，去寻找根组件，将_ routerRoot执行根组件（解决嵌套关系时候_ routerRoot指向不一致问题)这个_ routerRoot=(这。$家长本。$家长_ RouterRot)| | this } registerInstance(this，this) }，explored(){ registerInstance(this)})代码执行到这，初始化结束，界面将显示默认首页

路由更新方式：

一、主动触发

路由器链路绑定了点击方法，触发历史。推动或者历史。替换，从而触发历史。过渡到。过渡到用于处理路由转换，其中包含了更新路由用于更新_路线。在创建前中有劫持_路线的方法，当_路线变化后，触发路由器视图的变化。

二、地址变化（如：在浏览器地址栏直接输入地址)

历史悠久和HTML5History会分别监控hashchange和popstate来对路由变化作对用的处理。历史悠久和HTML5History捕获到变化后会对应执行推或替换方法，从而调用过渡到，剩下的就和上面主动触发一样啦。

总结

1、安装插件

与beforeCreate生命周期处理混合，初始化_routerRoot、_router、_route等数据。并将vue设置为静态访问路由器、路由器和路由，方便以后访问。路由器-链路用于触发路由的变化，路由器-视图作为功能组件用于触发相应路由视图的变化。

2.根据路由配置生成路由器实例

根据配置数组生成路由配置记录表，并生成用于监控路由变化的历史对象

3.将路由器实例传递到根vue实例

根据beforeCreate，为根vue对象设置劫持字段_route，用户触发router-view的变化，调用init()函数，完成第一条路由的渲染。第一次呈现的调用路径是调用history.transitionTo方法。根据路由器的匹配功能，生成新的路由对象，然后通过confirmTransition比较新生成的路由和当前路由对象是否发生变化。如果它被更改，它将触发updateRoute，更新hsitory.current属性，并触发根组件的_route的更改，从而导致组件调用render函数。更新路由器视图的另一种方法是主动触发。

Router-link与click方法绑定，触发history.push或history.replace，从而触发history.transitionTo来同时监控hashchange和popstate来处理路由更改。

以上就是边肖介绍的Vue-Router源代码分析和路由实现原理的详细讲解和集成，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！