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

相关推荐
蜡台3 小时前
Node 安装 awesome-qr 失败解决
javascript·vue·qrcode·awesome-qr
格子软件4 小时前
2026年GEO优化系统源码级状态机与多模型调度拆解
java·前端·vue.js·人工智能·vue·geo
HUMHSX5 小时前
Vue 项目启动全流程解析:从入口文件到全局指令注册与页面渲染
前端·javascript·vue.js
有颜有货5 小时前
PMC生产排产的4种算法,一次讲清
java·服务器·前端
小虎牙0075 小时前
Android kotlin图片库Coil源码详解
android·前端
随风一样自由5 小时前
【前端领域】前端开发核心应用场景与落地实践
前端·前端框架
an317425 小时前
弹窗数据流设计的两种高阶架构实践
前端·vue.js·架构
谢尔登6 小时前
【React】 状态管理方案
前端·react.js·前端框架
用户938515635076 小时前
手把手教你实现一个 MCP 文件读取服务器:从协议到代码的深度解析
javascript·人工智能
用户2136610035726 小时前
Vue商品详情与放大镜组件
前端·javascript