useRouter 作用

📋 一句话概括

useRouter 是 Vue Router 4 的组合式 API，用于在组件中访问路由器实例。

🎯 核心作用

在 Vue 3 的 Composition API 中获取路由器的实例，进行编程式导航和访问路由信息。

💡 基本用法

import { useRouter } from 'vue-router'

// 在 setup 函数或 <script setup> 中使用
const router = useRouter()

🔧 主要功能 ★

1. 编程式导航

// 跳转到指定路径
router.push('/home')

// 跳转到命名路由
router.push({ name: 'home' })

// 带参数跳转
router.push({ 
  name: 'user', 
  params: { id: 123 } 
})

// 带查询参数跳转
router.push({ 
  path: '/search', 
  query: { q: 'vue' } 
})

// 替换当前路由（不留历史记录）
router.replace('/login')

// 前进/后退
router.go(1)   // 前进
router.go(-1)  // 后退

2. 访问当前路由

// 获取当前路由信息
const route = router.currentRoute

// 监听路由变化
router.beforeEach((to, from) => {
  console.log('从', from.path, '跳转到', to.path)
})

📊 常用属性/方法 ★

🔄 与 Options API 对比

Options API 写法

<script>
export default {
  methods: {
    goToHome() {
      this.$router.push('/home')
    }
  }
}
</script>

Composition API 写法

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const goToHome = () => {
  router.push('/home')
}
</script>

📈 与 useRoute 的区别

import { useRouter, useRoute } from 'vue-router'

const router = useRouter()  // 用于跳转
const route = useRoute()    // 用于获取当前路由信息

// 获取当前路由参数
const deviceId = route.params.id

// 跳转到新路由
router.push(`/device/${deviceId}/edit`)

🎯 TypeScript 支持

import { useRouter, type RouteLocationRaw } from 'vue-router'

const router = useRouter()

// 类型安全的跳转
const navigate = (location: RouteLocationRaw) => {
  router.push(location)
}

// 使用
navigate({ name: 'device-detail', params: { id: 123 } })

💡 注意事项

1. 只能在 setup 中使用

// ✅ 正确
<script setup>
const router = useRouter()
</script>

// ❌ 错误
function someFunction() {
  const router = useRouter()  // 会报错！
}

2. 与全局 router 的区别

// 从文件导入的全局 router
import { router } from '@/router'

// 在非 setup 上下文中使用全局 router
function utilityFunction() {
  router.push('/home')  // 可以
}

📋 总结

useRouter 的主要作用：

1. ✅ 获取路由器实例：在 Composition API 中访问 router
2. ✅ 编程式导航：控制页面跳转
3. ✅ 路由管理：添加/删除路由
4. ✅ 历史控制：前进/后退操作
5. ✅ 类型安全：完整的 TypeScript 支持