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实例上的
00
相似问题