Vue3 中 Route 与 Router 的区别

在 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、简单对比

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.id
    
    return { navigate, userId }
  }
}

5、总结

Router 是"做"路由跳转的，而 Route 是"读"当前路由信息的。