【面试题系列Vue03】Vue Router 的 $route 和 $router 对象有什么区别?

在Vue.js中,route 和 router都是Vue Router 提供的对象,但它们之间主要的区别在于其 作用范围生命周期

作用范围

1、$router(下面简称router):

  • router 是一个全局路由实例,可以理解为路由的控制中心或者说是路由的管理器。它提供了一系列的方法来控制导航,负责管理整个路由的状态(包括当前路径、路由参数、路由切换等)。例如push、replace、go等,通过编程的方式来进行路由的跳转、修改 URL等操作。
  • router 对象在整个Vue应用中是唯一的,因此它的作用范围是全局的。也就是说,可以在任何组件内通过this.$router访问到同一个路由实例。

2、$route(下面简称route):

  • route是一个反映当前路由状态的对象,它包含了当前 URL 解析得到的信息,如路径(path)、查询参数(query)、哈希(hash)、参数(params)等。但是,route 对象是⼀个只读对象,我们无法通过改变 route 对象来改变当前路由。
  • route对象是响应式的,它会随着路由的变化而变化。每个组件实例都可以通过this.$route访问到它自己的当前路由状态对象,但这个对象是随着路由的变化而局部更新的。这意味着每个组件看到的route可能是不同的,具体取决于它们如何与当前路由相关联。

生命周期

1、$router(下面简称router):

  • router的生命周期与Vue应用的生命周期紧密相关,它代表了整个路由系统。从应用创建开始它就存在,直到应用销毁结束。因此,它的生命周期通常很长,与整个Vue实例的生命周期一致。

2、$route(下面简称route):

  • route对象的生命周期是动态的。它是单次路由匹配,即当路由匹配成功后,route 对象会被创建,并在路由匹配结束后被销毁。每当路由发生变化时,与新路由相关的组件将会接收到一个新的route对象。这意味着route的生命周期通常比较短,依赖于路由的活动周期。
一个总结
  • $router 对象是用于控制当前路由状态的方式。
  • $route 对象是获取当前路由信息的方式。

理解这些差异有助于在Vue应用中更加精确地控制路由行为,以及更好地管理组件的渲染和数据更新~

相关推荐
醉城夜风~8 分钟前
HTML常用标签详解学习博客:从基础标签到页面结构完整掌握
前端·学习·html
OpenTiny社区20 分钟前
拒绝臃肿!TinyRobot从“AI 输入框”到“AI输入控制台”的可扩展进化
前端·vue.js
淼澄研学1 小时前
PyTorch深度学习实战:5个核心方法从0到1构建神经网络
前端·数据库·python
英勇无比的消炎药1 小时前
Vue 工程接入 WebMCP SDK 最佳实践:从零构建智能前端应用
vue.js
MartinYeung51 小时前
[论文学习]WASP:面向提示注入攻击的Web代理安全性基准测试
前端·网络·学习
lemon_sjdk1 小时前
从 ServletRequest 到 Spring 抽象:Web 请求的底层基石与演化
java·前端·spring
程序员黑豆2 小时前
鸿蒙应用开发之状态变化通知:@Watch 装饰器详解与实战
前端·harmonyos
swipe2 小时前
13|(前端转全栈)支付成功不等于结束:回调、幂等、超时关单和状态竞争
前端·后端·面试
swipe2 小时前
12|(前端转全栈)点击提交订单后,后端如何用事务守住价格、库存和订单?
前端·后端·面试
小林ixn2 小时前
React + TypeScript 实战:从“类型体操”到“数据持久化”,一次讲透组件通信与副作用管理
前端·react.js·typescript