Vue开发之--useRoute() 和 useRouter() 的区别和用途

1️⃣ useRoute()：获取当前 路由信息对象

✅ 用法：

import { useRoute } from 'vue-router'

const route = useRoute()
console.log(route.query)       // 获取 query 参数
console.log(route.params)      // 获取动态路由参数
console.log(route.path)        // 获取当前路径

📦 返回的是响应式的 

RouteLocationNormalizedLoaded对象，包含：

• path：当前路径
• query：查询参数，如 ?id=1
• params：动态路由参数，如 /user/:id
• meta：路由元信息
• matched：匹配的路由记录数组
• name：路由名称

📌 典型用途：

• 获取页面初始化时传递的参数（如 query.id）
• 在 <script setup>

2️⃣ useRouter()：获取控制路由跳转的路由实例对象

✅ 用法：

import { useRouter } from 'vue-router'

const router = useRouter()
router.push({ name: 'UserDetail', query: { id: 1 } }) // 路由跳转
router.back() // 返回上一页

📦 返回的是 

Router

 实例，包含：

• push()：跳转路由
• replace()：替换当前路由
• go(n)：类似浏览器的 history 前进/后退
• back() / forward()

📌 典型用途：

• 处理点击按钮后的路由跳转
• 编程式导航（如登录后跳转首页）

🆚 总结对比表

🧠 使用时机

• 💬 读取传参或判断当前页面状态 → 用 useRoute()
• 🚀 跳转页面或返回操作 → 用 useRouter()