💡 一则也许对你有用的小广告 🏆

欢迎飞飞程序员   ,你将获得:专属的实战项目(已更新的所有会员标识的项目都能学习) / 1v1 提问 / Java 学习路线 / PHP 学习路线 / 学习打卡 / 社群讨论

  • 正在进行中的项目:《FFBlog知识付费博客项目》 正在持续更新中,基于 Spring Boot 3.x + JDK 21...,[**点击查看**] ;
  • 《从零开发:FFBlog知识付费博客项目(全栈开发)》 演示链接: https://ffblog.ffcxy.com/  ;

截止目前, 飞飞  正在疯狂爆肝实战项目,后续还会上新更多项目,目标是将所学知识开发成项目并且分享给大家,如知识付费系统, Ai系统, CMS系统,在线商城系统,等等 ,欢迎点击围观

在 Vue 3 的 Vue Router 中,useRouteruseRoute 是两个不同的组合式 API 函数,它们的作用和返回的对象有本质区别:


1. useRouter()

  • 作用:获取 路由实例(Router 对象),用于编程式导航(如跳转路由、前进后退等)。
  • 返回的对象routerRouter 类的实例)
  • 常用方法

    const router = useRouter();
    
    router.push('/home');      // 跳转到指定路径
    router.replace('/login');  // 替换当前路由(无历史记录)
    router.go(-1);            // 返回上一页
    router.back();            // 同 go(-1)
    router.forward();         // 同 go(1)
    
  • 典型场景
    在代码中主动触发路由跳转(如登录后跳转首页)。

2. useRoute()

  • 作用:获取 当前路由信息(Route 对象),包含当前路由的路径、参数、查询字符串等。
  • 返回的对象route(当前路由的响应式对象)
  • 常用属性

    const route = useRoute();
    
    route.path;       // 当前路径(如 "/user/1")
    route.params;     // 动态路由参数(如 { id: "1" })
    route.query;      // 查询参数(如 ?name=foo → { name: "foo" })
    route.hash;       // URL 的 hash 值(如 "#section")
    route.meta;       // 路由元信息(在路由配置中定义的 meta 字段)
    route.fullPath;   // 完整路径(包含查询和 hash)
    
  • 典型场景
    获取当前路由的参数(如从 /user/:id 中提取 id),或根据查询参数(?search=xxx)过滤数据。

核心区别

useRouter() useRoute()
用途 控制路由跳转(主动操作) 获取当前路由信息(被动读取)
类比 导航系统(指挥路线) GPS 定位(获取当前位置)
是否响应式 否(方法调用) 是(属性可响应式更新)

示例对比

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

// 编程式导航(主动跳转)
const router = useRouter();
router.push('/user/123'); 

// 获取当前路由信息(响应式)
const route = useRoute();
console.log(route.params.id); // 输出 "123"(假设当前路径是 /user/123)

注意事项

  1. 响应式依赖
    route 的属性是响应式的,可以在模板或 computed 中直接使用,而 router 是静态实例。
  2. 路由守卫
    在导航守卫(如 beforeEach)中,参数是 tofrom 路由对象,而非 useRoute 的结果。
  3. 组件外使用
    在非组件代码(如 Pinia store)中,需通过 import { router } from '@/router' 直接引用路由实例。

一句话总结

  • useRouter() → 用来操作路由(跳转、前进、后退)。
  • useRoute() → 用来读取路由信息(路径、参数、查询等)。
上一篇 重新认识Java中的重写(Override)和重载(Overload)的区别
下一篇 vue3中动态路由参数和查询参数的获取方法

全部评论(0)

头像
😃 😁 😅 😂 😍 😜 😝 🤑 🥵 🥰 😙 😎 😵 😭 😱 😖 🥳 👽 🙈 🤡 😤 💣 💯 💢 ❤️ 👍 👏 👋 👌 🤏 🙏
还没有任何评论哟~