vue 中router和route的区别

个人博客

1. Router

router 是 Vue Router 的实例，它管理应用程序的所有路由。Vue Router 提供了用于导航和配置路由的 API。通过 router，可以定义路由、导航到不同的路由以及访问全局路由状态。

主要用途

• 定义路由：使用 routes 配置定义应用程序的所有路由。
• 导航：通过编程式导航或使用 <router-link> 组件在路由之间导航。
• 访问全局状态：可以访问和修改全局路由状态，比如当前路由信息、导航守卫等。

2. Route

route 是当前激活的路由信息对象，它包含了与当前路由相关的所有信息，如路径参数、查询参数、路由名称等。route 对象是由 router 管理的，可以在组件中通过 this.$route 访问。

主要用途

• 获取当前路由信息：访问当前路由的路径、参数、查询参数、名称等。
• 动态路由匹配：获取动态路径参数和查询参数。
• 访问路由元数据：可以访问与当前路由相关的元数据。

示例

在组件中访问 route 信息：

this.$route.path;
this.$route.query;
this.$route.params;  

总结

特点	router	route
定义	Vue Router 实例，管理应用程序的所有路由	当前激活的路由信息对象
主要用途	定义路由、导航、访问和修改全局路由状态	获取当前路由的信息，如路径、参数、查询参数、名称等
访问方式	通过 this.$router 或导入 router 实例	通过 this.$route 或组合式 API 中的 useRoute 获取
示例	this.$router.push('/about')	this.$route.path

总结

• router：Vue Router 实例，用于管理路由、导航和全局路由状态。
• route：当前激活的路由信息对象，用于获取当前路由的路径、参数、查询参数等。