Vue 3 中 useRouter 与 useRoute 的深度解析

embedded/2024/11/13 6:59:25/

在 Vue 3 中,vue-router 提供了两个非常重要的 Composition API 钩子:useRouteruseRoute。这两个钩子虽然都与路由相关,但它们的用途和返回的数据类型截然不同。本文将详细解析这两个钩子的区别及其用法,帮助你在 Vue 3 应用中更加灵活地处理路由逻辑。

useRouter:控制路由的行为

useRouter 是一个函数,它返回当前路由器的实例。这个实例提供了多种方法来控制路由的跳转,如 pushreplacegoback 等。这使得在 Vue 组件内部实现页面导航变得非常简单和直接。

主要用途

  • 导航到不同的路由:通过调用 router.pushrouter.replace 等方法实现页面间的跳转。
  • 控制路由的历史记录:使用 router.gorouter.backrouter.forward 方法在路由历史中前进或后退。

示例代码

javascript">import { useRouter } from 'vue-router';  export default {  setup() {  const router = useRouter();  // 导航到首页  function goToHome() {  router.push('/home');  }  // 使用命名路由和参数导航  function goToUserProfile(userId) {  router.push({ name: 'userProfile', params: { id: userId } }); // 注意:这里使用 params 可能不适用于命名路由,通常使用 query 或 params(在路由配置中指定)  }  return { goToHome, goToUserProfile };  }  
}

路由器实例的常用方法

  • router.push(location, onComplete?, onAbort?):导航到新的 URL,向 history 栈添加新记录。
  • router.replace(location, onComplete?, onAbort?):导航到新的 URL,但替换掉当前的 history 记录。
  • router.go(n):在 history 记录中前进或后退 n 步。
  • router.back():后退一步,相当于 router.go(-1)
  • router.forward():前进一步,相当于 router.go(1)

useRoute:获取当前路由的信息

useRoute 是一个函数,它返回当前路由位置的对象,即当前激活的路由信息。这个对象包含了当前路由的各种详细信息,如路径、查询参数、hash 值等。

主要用途

  • 获取当前路由的信息:如路径、查询参数、hash 等。
  • 访问路由的参数:包括动态路由的参数和查询参数。

示例代码

javascript">import { useRoute } from 'vue-router';  export default {  setup() {  const route = useRoute();  // 获取当前路由的路径  /userconsole.log(route.path);  // 假设有动态路由 /users/:id  const userId = route.params.id; // 注意:对于动态路由参数,通常使用 params.id 在组件内部获取,但具体取决于路由配置  console.log(userId);  // 获取查询参数  /search?q=vue  const queryParams = route.query;  console.log(queryParams.q); // 假设 URL 是 /search?q=vue  return { userId, queryParams };  }  
}

useRoute 返回的对象属性

  • route.path:当前路由的路径(字符串)。
  • route.params:一个包含动态片段和全匹配片段的键值对对象(注意:在某些情况下,可能需要在组件内部通过 $route.params 访问)。
  • route.query:一个包含所有查询参数的键值对对象。
  • route.hash:当前路由的 hash 值(带 # 符号)。
  • route.fullPath:包含路径、查询参数和 hash 的完整 URL 路径。

总结

  • useRouter:用于控制路由的行为,如导航到不同的页面,控制路由的历史记录等。
  • useRoute:用于获取当前路由的信息,如路径、查询参数、hash 等,以便在组件内部根据这些信息执行相应的逻辑。

理解这两个钩子的区别和用法,可以帮助你更好地在 Vue 3 应用中处理路由相关的逻辑,提升开发效率和应用的灵活性。


http://www.ppmy.cn/embedded/113893.html

相关文章

【MYSQL表的增删改查(基础)】

MYSQL表的增删改查(基础) 一、CRUD二、新增(Create)2.1 单行数据全列插入2.2 多行数据指定列插入 三、查询(Retrieve)3.1 全列查询3.2 指定列查询3.3 查询字段为表达式3.3.1 表达式不包含字段3.3.2 表达式包…

黑马点评19——多级缓存-缓存同步

文章目录 数据同步策略安装Canal监听canal实现缓存同步数据库连接遇到问题 在多级缓存中的数据一致性问题,也就是缓存同步的问题 数据同步策略 要是使用消息队列的方式,我们还需要修改代码,至少需要发送一条通知吧。 canal可以监听数据库的变…

Java之文件操作和IO

目录 File类 属性 构造方法 方法 文件内容的读写 InputStream OutputStream File类 属性 修饰符及类型属性说明static StringpathSeparator依赖于系统的路径分隔符,String类型的表示static charpathSeparator依赖于系统的路径分隔符,char类型的…

Linux-进程优先级

🌈个人主页:Yui_ 🌈Linux专栏:Linux 🌈C语言笔记专栏:C语言笔记 🌈数据结构专栏:数据结构 🌈C专栏:C 文章目录 1. 为什么要有优先级的概念2.进程优先级的基本…

国内外ChatGPT网站集合,无限制使用【2024-09最新】~

经过我一年多以来,使用各种AI工具的体验,我收集了一批AI工具和站点 这些工具都是使用的最强最主流的模型,也都在各个领域里都独领风骚的产品。 而且,这些工具你都可以无限制地使用。 无论你是打工人、科研工作者、学生、文案写…

xml中SQL执行错误(使用另外一张表的两个字段,组装SQL的where查询条件)

SQL实现功能描述&#xff1a;根据系统设置中的商店到期提醒周期、单位&#xff0c;在过期提醒的列表中&#xff0c;对数据进行周期展示 错误复现&#xff1a; Mapper接口中抽象方法的定义如下&#xff1a; Page<ShopVo> queryList(Param(“vo”) ShopVo shopVo ,Page&…

解决内存8G但是需要读取一个几百G的文件到内存的方法

内存映射&#xff08;Memory Mapping&#xff09;提供了一种有效的方法来处理这类问题&#xff0c;通过将文件的一部分或全部映射到进程的虚拟地址空间&#xff0c;使得对文件的访问就像访问内存一样高效。 1. 内存映射的基本概念 内存映射文件是一种将磁盘上的文件与进程的虚…

PDF——压缩大小的方法

方法一&#xff1a;QQ浏览器->格式转换->PDF转纯图PDF