深入Vue-Router源码分析路由实现原理
使用Vue开发温泉应用,离不开vue-router,那么Vue和vue-router是如何协作运行的呢,下面从使用的角度,大白话帮大家一步步梳理下vue-router的整个实现流程。
到发文时使用的版本是:
vue (v2.5.0)
- vue-router (v3.0.1)
一、vue-router源码结构
github地址:https://github.com/vuejs/vue-router
组件下是两个组件& lt; router-view>和& lt; router-link>
历史是路由方式的封装,提供三种方式
util下主要是各种功能类和功能函数
create-matcher和create-router-map是生成匹配表
指数是VueRouter类,也整个插件的入口
安装提供安装的方法
先整体展示下vue-router使用方式,请牢记一下几步哦。
从“Vue”进口Vue
从“vue-router”进口VueRouter//注册插件如果是在浏览器环境运行的,可以不写该方法
Vue.use (VueRouter)//1。定义(路由)组件。//可以从其他文件进口进来
const用户={模板:' & lt; div>用户& lt;/div> '}
常量的作用={模板:' & lt; div>角色& lt;/div> '}//2。定义路由//数组,每个路由应该映射一个组件。
const路线=[
{路径:/user,组件:用户},
{路径:/home,组件:回家}
]//3。创建路由器实例,并传“路线”配置
const路由器=new VueRouter ({
路线
}）//4。创建和挂载根实例。//记得要通过路由器对象以参数注入Vue,//从而让整个应用都有路由功能//使用router-link组件来导航。//路由出口//路由匹配到的组件将渲染在这里
const应用=new Vue ({
路由器,
模板:
& lt; div id=坝τ谩北?
& lt; h2> Basic
& lt; ul>
& lt; li> & lt; router-link="/"祝辞/& lt;/router-link> & lt;/li>
& lt; li> & lt; router-link="/用户”的在用户& lt;/router-link> & lt;/li>
& lt; li> & lt; router-link="/角色”在角色& lt;/router-link> & lt;/li>
& lt; router-link标签="李"="/用户“祝辞/用户& lt;/router-link>
& lt;/ul>
& lt; router-view类="视图"祝辞& lt;/router-view>
& lt;/div>
”
})。美元山(“#应用”)
之前
分析开始
第一步
Vue是使用。使用(插件)方法将插件注入到Vue中。
使用方法会检测注入插件VueRouter内的安装方法,如果有,则执行安装方法。
注意:如果是在浏览器环境,在index.js内会自动调用。使用方法。如果是基于节点环境,需要手动调用。
如果(inBrowser,,window.Vue) {
window.Vue.use (VueRouter)
}
安装解析(对应目录结构的install.js)
该方法内主要做了以下三件事:
<李> 1,对Vue实例混入beforeCreate钩子操作(在Vue的生命周期阶段会被调用)
<李> 2,通过Vue。原型定义路由器,路由器,路线属性(方便所有组件可以获取这两个属性)
<李> 3,Vue上注册router-link和router-view两个组件
李
,
导出功能安装(Vue) {
如果安装。安装,,_Vue===Vue)回来
安装。安装=true
_Vue=Vue
const isDef=v=比;v !==定义
const registerInstance=(vm, callVal)=比;{
让我=vm。options._parentVnode美元
如果(isDef (i),,isDef (i=i.data),,isDef (i=i.registerRouteInstance)) {
我(vm, callVal)
}
}
Vue.mixin ({//对Vue实例混入beforeCreate钩子操作
beforeCreate () {
如果(isDef(这一点。options.router美元)){
这一点。_routerRoot=这
这一点。_router=options.router美元
this._router.init(这)
Vue.util.defineReactive (“_route”,这this._router.history.current)
其他}{
这一点。_routerRoot=(。父母和美元,这个。parent._routerRoot美元)| |
}
registerInstance(这个)
}，
摧毁了(){
registerInstance(这)
}
}）//通过Vue。路由器,美元原型定义路线属性(方便所有组件可以获取这两个属性)
Object.defineProperty (Vue.prototype美元路由器,{
get () {this._routerRoot返回。_router}
}）
Object.defineProperty (Vue.prototype美元路线,{
get () {this._routerRoot返回。_route}
}）//Vue上注册router-link和router-view两个组件
Vue.component (RouterView,视图)
Vue.component (RouterLink,链接)
const stratocaster=Vue.config.optionMergeStrategies//使用相同的钩子钩合并战略路线
stratocaster。beforeRouteEnter=stratocaster。beforeRouteLeave=stratocaster。beforeRouteUpdate=strats.created
}
