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

相关推荐
weixin_462446236 分钟前
nodejs 下使用 Prettier 美化单个 JS 文件(完整教程)
开发语言·javascript·ecmascript
岭子笑笑25 分钟前
vant 4 之loading组件源码阅读
前端
q_191328469529 分钟前
基于SpringBoot2+Vue2的行业知识答题考试系统
java·vue.js·spring boot·mysql·毕业设计·计算机毕业设计·演示文稿
hxmmm29 分钟前
自定义封装 vue多页项目新增项目脚手架
前端·javascript·node.js
ETA829 分钟前
JS执行机制揭秘:你以为的“顺序执行”,其实是V8引擎在背后搞事情!
前端·javascript
鹏北海-RemHusband30 分钟前
微前端实现方式:HTML Entry 与 JS Entry 的区别
前端·javascript·html
行走的陀螺仪1 小时前
JavaScript 装饰器完全指南(原理/分类/场景/实战/兼容)
开发语言·javascript·ecmascript·装饰器
瘦的可以下饭了1 小时前
3 链表 二叉树
前端·javascript
我那工具都齐_明早我过来上班1 小时前
WebODM生成3DTiles模型在Cesium地图上会垂直显示问题解决(y-up-to-z-up)
前端·gis
粉末的沉淀1 小时前
jeecgboot:electron桌面应用打包
前端·javascript·electron