Vue.js 3.2 中 useRouter 和 useRoute 的用法详解

ztj100 2025-03-25 19:40 80 浏览 0 评论

介绍

Vue.js 是一款流行的前端框架，由于其易用性和灵活性，在开发中得到了广泛的应用。而在 Vue.js 3.2 中，新增了许多 Composition API，其中 useRouter 和 useRoute 可以用于路由管理，使得前端路由开发更加方便。

useRouter 的用法

在前端开发中，我们经常需要程序处理用户的路由导航，这时候就需要用到 useRouter。它是一个用于获取当前路由实例的函数，我们可以调用这个函数来获取路由实例，然后进行路由导航。

useRoute 的用法

除了需要导航路由之外，我们还需要获取一些路由信息，这时候就需要用到 useRoute。它是一个用于获取当前路由对象的函数，我们可以调用这个函数来获取路由的参数、查询参数等信息。

安装路由

npm install vue-router

引入路由

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

定义变量

const $router = useRouter()  // 这是路由跳转的
const $route = useRoute()  // 用于接收路由参数的

使用

(1)、路由跳转($router)

方式一：

$router.push('/add?name=12&age=12') // add/是要跳转的路由  name、age是参数

方式二：

$router.push({path: '/add', query: {
    name: "12",
    age: 12
}})

(2)、获取参数

const name = route.query.name  // 获取路由的name参数值
const age = route.query.age  // 获取路由的age参数值

在上面的代码中，我们首先导入了 vue-router 中的 useRoute，然后在 setup 函数中调用了这个函数。最后，我们返回了一个对象，这个对象包含了当前路由对象中的完整路径、路由参数、查询参数等信息。

总结

useRouter 和 useRoute 是 Vue.js 3.2 中新增的两个用于路由管理的 Composition API。 useRouter 用于获取路由实例。而 useRoute 用于获取当前路由对象。使用这两个 API，我们可以更加方便地管理前端路由，提高开发效率。

参考文献

Vue Router: Composition API
https://next.router.vuejs.org/guide/advanced/composition-api.html

vue route

上一篇：Vue从入门到实践丨Vue-router基本使用
下一篇：Vue3实战笔记(24)—路由Vue-Router 实战指南(嵌套路由)

Vue.js 3.2 中 useRouter 和 useRoute 的用法详解

介绍

useRouter 的用法

useRoute 的用法

安装路由

引入路由

定义变量

使用

总结

参考文献

相关推荐

取消回复欢迎你发表评论:

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起

面试官:使用int类型做加减操作，是线程安全吗

C++编程知识:ToString()字符串转换你用正确了吗?

【Spring Boot】WebSocket 的 6 种集成方式

PyTorch 深度学习实战(26):多目标强化学习Multi-Objective RL

pytorch中的 scatter_()函数使用和详解

与 Java 17 相比，Java 21 究竟有多快?

基于TensorRT_LLM的大模型推理加速与OpenAI兼容服务优化

这一次，彻底搞懂Java并发包中的Atomic原子类

Vue.js 3.2 中 useRouter 和 useRoute 的用法详解

介绍

useRouter 的用法

useRoute 的用法

安装路由

引入路由

定义变量

使用

总结

参考文献

相关推荐

取消回复欢迎 你 发表评论:

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起

面试官:使用int类型做加减操作，是线程安全吗

C++编程知识:ToString()字符串转换你用正确了吗?

【Spring Boot】WebSocket 的 6 种集成方式

PyTorch 深度学习实战(26):多目标强化学习Multi-Objective RL

pytorch中的 scatter_()函数使用和详解

与 Java 17 相比，Java 21 究竟有多快?

基于TensorRT_LLM的大模型推理加速与OpenAI兼容服务优化

这一次，彻底搞懂Java并发包中的Atomic原子类

取消回复欢迎你发表评论:

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起