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

相关推荐
程序员爱技术1 小时前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
并不会2 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
悦涵仙子2 小时前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
衣乌安、2 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜2 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师2 小时前
CSS的三个重点
前端·css
耶啵奶膘4 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^5 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie6 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic6 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js