前言

上节介绍了路由组件传参，通过props属性达到传参的目的，如何获取参数值呢？这时候就需要用到路由对象的属性，本节我们就来学习一下路由对象。

route

路由对象就是当前路由信息的集合，传递的参数值也包含其中。而参数的获取方法由vue-router的版本决定，vue-router使用版本又与vue密切相关，vue2中使用vue-router3.x，vue3中就是vue-router4.x。在vue2组件内可以通过vue实例上的route来访问路由对象上面的属性。之所以这么简便是因为vue-router帮我们处理了，我们可以一起来探索下其实现原理：

首先我们会通过VueRouter创建一个路由实例，然后挂载到Vue实例上。

接下来我们找到VueRouter对象源码，然后搜索route相关信息，就会发现vuer-router是通过defineProperty方法将route对象添加到vue的prototype。

可以看到route的值对应的是_route，而_route就是当前监听的路由。

route的实现并不复杂，简单来说就是将路由信息放到了Vue原型上，方便我们在vue当中使用。知道了实现原理我们看下路由对象属性，路由对象属性就是路由信息：

path: 表示路由的绝对路径。
fullPath：表示路由的全部路径，包括hash值与query参数。
name：表示路由的命名，就是我们前面提到的命名路由。
redirectedFrom：表示路由重定向的名称。
hash：表示当前路由的hash值，注意该值带#号，比如#top。
matched：路由记录也就是routes里面的对象。
params：params参数的集合，如果没有params参数就是一个空对象。
query：query参数的集合，与params参数最明显区别在于query参数是在url 上面的。
以上就是route所有属性，而params与query就是我们获取参数的属性方法。

useRoute

vue3引入了setup与组合式API，在setup中访问不到vue实例没有this的概念，所有在vue-router4.x中添加了useRoute函数，让我们能够在setup中访问路由对象，其中useRoute参数相关属性依旧是params与query。

js 复制代码

   import { useRoute } from 'vue-router'
   const route = useRoute()
   const name = route.params.name
   const age = route.query.age

useRoute的ts类型为RouteLocationNormalizedLoaded，里面的属性大部分跟route一致。userRoute的源码看起来很简单，我们在useApi中就能找到：

inject就是vue中的注入，注入的就是routeLocationKey，routeLocationKey就是接口类型的inject的key值。

有inject注入就会有provide提供，找到provide就能知道清楚useRoute的逻辑。 useRoute的逻辑可以简单概括为，router在实例化的时候通过provide将路由信息提供，而useRoute就是通过inject拿到路由信息。

总结

以上就是路由对象，它包含着路由的相关信息，在组件中想要获取路由信息就需要访问路由对象。为了适配vue的版本，vue-router的版本方法也有所不同，vue2直接用this，vue3则用useRoute。

Vue Router学习（九）—— 路由对象

前言

route

useRoute

总结