路由对象route和router的区别

路由对象route和router的区别

在 Vue Router 中，route 和 router 是两个不同的对象，分别代表了当前路由信息和路由器实例。

1. route 对象：

   • route 对象代表了当前的路由信息，包含了当前路由的路径、参数、查询参数等信息。
   • 在组件中通过访问 $route 属性可以获取到当前的 route 对象。
   • route 对象是只读的，不能直接修改其中的属性。

2. router 对象：

   • router 对象代表了整个路由器的实例，用于管理应用中的路由。
   • router 对象包含了路由的配置、路由的跳转方法等。
   • 在组件中通过访问 $router 属性可以获取到当前的 router 对象。
   • router 对象具有一些常用的方法，如 push、replace 等，用于跳转到不同的路由。

总结来说，route 是当前路由的信息对象，用于获取当前路由的相关信息；而 router 则是整个路由器的实例，用于管理路由并进行路由的跳转。

示例代码中的使用场景：

// 获取当前路由的路径和参数
console.log(this.$route.path) // 当前路由的路径
console.log(this.$route.params) // 当前路由的参数
console.log(this.$route.query) // 当前路由的查询参数

// 跳转到其他路由
this.$router.push('/home') // 使用 $router 对象跳转到 '/home' 路由
this.$router.replace('/about') // 使用 $router 对象替换成 '/about' 路由

需要注意的是，在组件中使用的 $route 和 $router 属性是 Vue Router 提供的特殊属性，用于方便地访问当前的路由信息和进行路由的跳转操作。