手机版

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

时间:2021-08-24 来源:互联网 编辑:宝哥软件园 浏览:

深度分析路由实现原理在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源代码分析和路由实现原理的详细讲解和集成,希望对大家有所帮助。如果你有任何问题,请给我留言,边肖会及时回复你。非常感谢您对我们网站的支持!

版权声明:详细解释Vue-Router源代码分析路由实现原理是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。