【面试题系列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应用中更加精确地控制路由行为,以及更好地管理组件的渲染和数据更新~

相关推荐
腾讯TNTWeb前端团队1 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰4 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪4 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy5 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom6 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom6 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom6 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom6 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom6 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试