当前位置：首页 > news >正文

Vue3 中 Route 与 Router 的区别

news 来源：原创 2025/5/22 15:32:13

在 Vue Router 中，Route 和 Router 是两个相关但完全不同的概念：

1、Router (路由实例)

定义：Router 是路由器的实例，负责整个应用的路由管理
功能：
- 管理路由映射表（路由配置）
- 提供编程式导航方法（如 push, replace, go）
- 监听 URL 变化
- 匹配路由组件

获取方式：

import { useRouter } from 'vue-router'
const router = useRouter()

常用方法：
- router.push('/path') // 跳转到新路由（添加历史记录）
- router.replace('/path') // 替换当前路由（不添加历史记录）
- router.go(-1) // 后退一步
- router.back() //后退一步
- router.forward() //前进一步

2、Route (路由)

定义：Route 是当前激活的路由对象，表示当前的路由状态
功能：
- 包含当前路由的信息
- 提供访问当前路由参数、查询参数、hash等

获取方式：

import { useRoute } from 'vue-router' const route = useRoute()

常用属性：
- route.path //当前路由路径（如 "/path/1002"）
- route.params //动态路由参数（如 { name: 'zhangsan' }）
- route.query - URL 查询参数如 ?id=1002=> { id: '1002' }）
- route.hash - URL 的 hash 部分（如 #home）
- route.name - 路由名称（如果有定义）
- route.matched - 当前匹配的路由记录数组

3、简单对比

特性	Router	Route
类型	路由管理器（主动控制导航）	当前路由信息（被动反映状态）
用途	控制路由跳转	获取当前路由信息，参数、查询、路径等
修改 URL	可以（通过 `push`/`replace`）	只读
响应式	非响应式对象	响应式对象（自动更新）
获取方式	`useRouter()` 或 `this.$router`	`useRoute()` 或 `this.$route`
典型使用	编程式导航	访问路由参数、查询参数等

4、示例

import { useRouter, useRoute } from 'vue-router'export default {setup() {const router = useRouter() // 路由器实例const route = useRoute()   // 当前路由对象function navigate() {// 使用 router 进行导航router.push({ name: 'user', params: { id: 123 } })}// 使用 route 访问当前路由信息const userId = route.params.idreturn { navigate, userId }}
}