const app = new Vue({ router, template: ` <div> <h1>Basic</h1> <ul> <li><router-link to="https://www.jb51.net/">/</router-link></li> <li><router-link to="/user">用户</router-link></li> <li><router-link to="/role">角色</router-link></li> <router-link tag="li" to="/user">/用户</router-link> </ul> <router-view></router-view> </div> ` }).$mount('#app')
代码执行到这，会进入Vue的生命周期，还记得第一步Vue-Router对Vue混入了beforeCreate钩子吗，在此会执行哦
Vue.mixin({ beforeCreate () { //验证vue是否有router对象了，如果有，就不再初始化了 if (isDef(this.$options.router)) { //没有router对象 //将_routerRoot指向根组件 this._routerRoot = this //将router对象挂载到根组件元素_router上 this._router = this.$options.router //初始化，建立路由监控 this._router.init(this) //劫持数据_route，一旦_route数据发生变化后，通知router-view执行render方法 Vue.util.defineReactive(this, '_route', this._router.history.current) } else { //如果有router对象，去寻找根组件，将_routerRoot执行根组件（解决嵌套关系时候_routerRoot指向不一致问题） this._routerRoot = (this.$parent && this.$parent._routerRoot) || this } registerInstance(this, this) }, destroyed () { registerInstance(this) } })
代码执行到这，初始化结束，界面将显示默认首页
路由更新方式：
一、主动触发
router-link绑定了click方法，触发history.push或者history.replace，从而触发history.transitionTo。
transitionTo用于处理路由转换，其中包含了updateRoute用于更新_route。
在beforeCreate中有劫持_route的方法，当_route变化后，触发router-view的变化。
二、地址变化（如：在浏览器地址栏直接输入地址）
HashHistory和HTML5History会分别监控hashchange和popstate来对路由变化作对用的处理 。
HashHistory和HTML5History捕获到变化后会对应执行push或replace方法，从而调用transitionTo
,剩下的就和上面主动触发一样啦。
总结
1、安装插件
混入beforeCreate生命周期处理，初始化_routerRoot，_router，_route等数据
全局设置vue静态访问router和router和route，方便后期访问
完成了router-link和 router-view 两个组件的注册，router-link用于触发路由的变化，router-view作 为功能组件，用于触发对应路由视图的变化
2、根据路由配置生成router实例
根据配置数组生成路由配置记录表
生成监控路由变化的hsitory对象
3、将router实例传入根vue实例
根据beforeCreate混入，为根vue对象设置了劫持字段_route，用户触发router-view的变化
调用init()函数，完成首次路由的渲染，首次渲染的调用路径是 调用history.transitionTo方法，根据router的match函数，生成一个新的route对象
接着通过confirmTransition对比一下新生成的route和当前的route对象是否改变，改变的话触发updateRoute，更新hsitory.current属性，触发根组件的_route的变化,从而导致组件的调用render函数，更新router-view
另外一种更新路由的方式是主动触发
router-link绑定了click方法，触发history.push或者history.replace,从而触发history.transitionTo
同时会监控hashchange和popstate来对路由变化作对用的处理
以上所述是小编给大家介绍的Vue-Router源码分析路由实现原理详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: