VueRouter路由,总结

来源:11-17 路径切换(10)

前端工程师666777888

2021-06-05

要实现路径跳转,必须执行transitionTo()函数

计算出路径对应的route对象
执行componentTransition()执行各种守卫函数

切换路径时要实现组件渲染,Vue实例的_route必须为响应式

router在全局只有一份,是VueRouter()的实例,在new Vue()传入的。也就是说无论哪个组件实例访问router都是同一个

route,不同组件实例访问是不同的,代表的是当前url对应的route对象

疑问,
route是根据url区分的,还是以组件区分的。也就是说,同一个url下,无论哪个组件访问route都是一样的?还是不同组件实例访问的route都不一样

在进入页面时,首先执行VueRouter()中的install函数,完成初始化工作:
全局混入minix
全局组件2个
给Vue原型添加$router和$route属性

第二步,new VueRouter()生成一个实例对象
,完成routes配置的映射关系
pathList
pathMap
nameMap   为以后工作打基础
生成record对象,一个路径一个,是全路径。

第三步,把第二步生成的实例放到new Vue()中,为了把Vue实例和其他组件实例区分开,其他组件配置中没有这个router实例

Vue是通过beforeCreate钩子,router.init(),来使用路由的东西的

其他组件是通过:
点击router-link标签 ,
手动调用router.push() ,
点击浏览器的前进后退按钮执行hashChange事件。
3种情况来使用路由的东西的

以上3种情况,都是从执行transitionTo()开始的,守卫执行完,改变Vue实例._route,实现app.vue组件的重新渲染

完成整个过程









写回答

1回答

前端工程师666777888

提问者

2021-06-07

$route是根据url来确定的   $route最终是绑定在Vue实例上的

跟组件没有关系     一旦url确定了  无论在哪个组件访问this.$route都是同一个值

url不同  this.$route不同

this.$router  全局只有一个     都是VueRouter()的实例     也是绑定在Vue实例上的


0
0

Vue.js 源码深入解析 深入理解Vue实现原理

全方位讲解 Vue.js 源码,进阶高级工程师

4986 学习 · 1038 问题

查看课程