Vue3中使用组合式API通过路由传值详解

在Vue 3中,使用组合式API来传递路由参数是一种常见的需求。Vue Router 是 Vue.js的官方路由管理工具,可以在不同的场景下通过多种方式传递和接收路由参数。下面将详细讲解几种常见的路由传值方式,并提供相应的代码示例。

目录

      • 1. **通过路由参数传值(动态路由参数)**
        • 使用场景:
        • 代码示例:
      • 2. **通过查询参数传值(URL查询字符串)**
        • 使用场景:
        • 代码示例:
      • 3. **通过 `state` 传值(使用 `router.push` 或 `router.replace`)**
        • 使用场景:
        • 代码示例:
      • 4. **通过 `props` 传值(配合路由的 `props` 配置)**
        • 使用场景:
        • 代码示例:
      • 5. **总结**

1. 通过路由参数传值(动态路由参数)

路由参数是一种最常用的传值方式,通常用于 URL 路径中。例如,某个页面需要根据用户 ID 来加载数据。

使用场景:
  • 根据路由参数(如用户ID)显示不同的数据或组件。
代码示例:

定义路由(router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import UserProfile from '../views/UserProfile.vue';const routes = [{path: '/',name: 'Home',component: Home},{path: '/user/:id',  // 使用动态路由参数name: 'UserProfile',component: UserProfile}
];const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
});export default router;

传参方式
如果你的路由是命名的,可以使用 name 属性来导航,并传递参数。

import { useRouter } from 'vue-router';
const router = useRouter();
router.push({ name: 'user', params: { id: 123 } })

在组件中使用路由参数(UserProfile.vue

<template><div><h1>User Profile</h1><p>User ID: {{ userId }}</p></div>
</template><script setup>
import { useRoute } from 'vue-router';// 获取路由对象
const route = useRoute();// 从路由中获取动态参数
const userId = route.params.id;
</script>

访问 URL:

http://localhost:8080/user/123

2. 通过查询参数传值(URL查询字符串)

查询参数通常用于传递不属于路径的一些附加信息,适合用于过滤、分页等场景。

使用场景:
  • 向一个页面传递一些过滤条件、分页信息等。
代码示例:

定义路由(router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import SearchResults from '../views/SearchResults.vue';const routes = [{path: '/search',name: 'SearchResults',component: SearchResults}
];const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
});export default router;

传参方式
如果你的路由是命名的,可以使用 name 属性来导航,并传递参数。

import { useRouter } from 'vue-router';
const router = useRouter();
router.push({ path: '/register', query: { plan: 'private' } })

在组件中使用查询参数(SearchResults.vue

<template><div><h1>Search Results</h1><p>Search Query: {{ searchQuery }}</p></div>
</template><script setup>
import { useRoute } from 'vue-router';// 获取查询参数
const route = useRoute();
const searchQuery = route.query.q;
</script>

访问 URL:

http://localhost:8080/search?q=vue3

3. 通过 state 传值(使用 router.pushrouter.replace

通过 router.pushrouter.replace 方法,除了可以传递路径、查询参数外,还可以使用 state 来传递一些临时的状态数据。这种方式非常适合传递一些短期的、不需要在 URL 中显示的值。

使用场景:
  • 在路由跳转时传递一些临时的数据,比如在表单提交后跳转到详情页,并传递表单数据。
代码示例:

跳转时使用 state 传值(在组件中使用 router.push

<template><div><button @click="goToUserProfile">Go to User Profile</button></div>
</template><script setup>
import { useRouter } from 'vue-router';const router = useRouter();const goToUserProfile = () => {router.push({ name: 'UserProfile',params: { id: '123' },state: { fromDashboard: true }});
};
</script>

在目标组件中获取 stateUserProfile.vue

<template><div><h1>User Profile</h1><p>User ID: {{ userId }}</p><p v-if="fromDashboard">Navigated from Dashboard</p></div>
</template><script setup>
import { useRoute, useRouter } from 'vue-router';// 获取路由参数
const route = useRoute();
const userId = route.params.id;// 获取路由状态
const router = useRouter();
const fromDashboard = router.currentRoute.value.state?.fromDashboard;
</script>

4. 通过 props 传值(配合路由的 props 配置)

Vue Router 支持将路由参数直接作为 props 传递给组件。这对于需要从路由中解耦组件逻辑的情况非常有用。

使用场景:
  • 将路由参数直接作为组件的 props 传递,减少路由与组件之间的耦合。
代码示例:

定义路由(router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import UserProfile from '../views/UserProfile.vue';const routes = [{path: '/user/:id',name: 'UserProfile',component: UserProfile,props: true  // 开启 props 传递}
];const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
});export default router;

在组件中接收 propsUserProfile.vue

<template><div><h1>User Profile</h1><p>User ID: {{ id }}</p></div>
</template><script setup>
// 接收路由参数作为 props
defineProps({id: String
});
</script>

5. 总结

在 Vue 3 中,可以通过不同的方式在路由之间传递值,选择哪种方式取决于具体的使用场景:

  • 动态路由参数:适用于需要根据 URL 动态改变内容的场景。
  • 查询参数:适用于传递额外的过滤条件或分页信息。
  • state:适用于传递不需要展示在 URL 中的临时数据。
  • props:适用于将路由参数直接作为组件的 props,简化组件的逻辑。

这些传值方法可以根据实际需求组合使用,以提供更灵活的路由管理和数据传递机制。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/68399.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

“AI智能防控识别系统:守护安全的“智慧卫士”

在如今这个科技飞速发展的时代&#xff0c;安全问题始终是大家关注的焦点。无论是企业园区、学校校园&#xff0c;还是居民社区&#xff0c;都希望能有一双“慧眼”时刻守护着&#xff0c;及时发现并防范各种安全隐患。而AI智能防控识别系统&#xff0c;就像一位不知疲倦、精准…

Leetcode 983. 最低票价 动态规划

原题链接&#xff1a;Leetcode 983. 最低票价 class Solution { public:int mincostTickets(vector<int>& days, vector<int>& costs) {int n days.size();int last days[n - 1];int dp[last 1];map<int, int> mp;for (auto x : days)mp[x] 1;dp…

Vue篇-07

Vue UI组件库 一、移动端常用的UI组件库 1.1、Vant 1.2、Cube UI 1.3、Mint UI 二、PC端常用的UI组件库 2.1、Element UI Element - The worlds most popular Vue UI framework 安装&#xff1a; 按需引入&#xff1a; 135_尚硅谷Vue技术_element-ui按需引入_哔哩哔哩_b…

2025.1.15——四、布尔注入

题目来源&#xff1a;ctfhub技能树 目录 一、基本操作&#xff1a;整理已知信息&#xff0c;得到本题为布尔注入 方法一&#xff1a;手工盲注&#xff08;不推荐&#xff09; step 1&#xff1a;判断具体形式 step 2&#xff1a;查询字段数 step 3&#xff1a;通过回显判…

基于SpringBoot的装修公司管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…

小游戏前端地区获取

目前前端获取除了太平洋&#xff0c;没有其它的了。 //在JS中都是使用的UTF-8&#xff0c;然而requst请求后显示GBK却是乱码&#xff0c;对传入的GBK字符串&#xff0c;要用数据流接收&#xff0c;responseType: "arraybuffer" tt.request({url: "https://whoi…

向harbor中上传镜像(向harbor上传image)

向 Harbor 中上传镜像通常分为以下几个步骤&#xff1a; 1、登录 Harbor 2、构建镜像 3、标记镜像 4、推送镜像到 Harbor 仓库 1、登录 Harbor 首先&#xff0c;确保你已经能够访问 Harbor&#xff0c;并且已经注册了账户。如果还没有 Harbor 账户&#xff0c;你需要先注册一…

STM32 HAL库函数入门指南:从原理到实践

1 STM32 HAL库概述 STM32 HAL(Hardware Abstraction Layer)库是ST公司专门为STM32系列微控制器开发的一套硬件抽象层函数库。它的核心设计理念是在应用层与硬件层之间建立一个抽象层&#xff0c;这个抽象层屏蔽了底层硬件的具体实现细节&#xff0c;为开发者提供了一套统一的、…

TiDB使用过程中需要注意的坑点:避免踩雷

TiDB使用过程中需要注意的坑点&#xff1a;避免踩雷 TiDB作为一个分布式数据库&#xff0c;虽然在许多场景下表现出色&#xff0c;但在使用过程中也有一些“坑”需要开发者特别注意。尤其是在生产环境中&#xff0c;踩雷可能会导致性能问题&#xff0c;甚至系统宕机。今天&…

字符串dp系列

647. 回文子串 给定一个字符串&#xff0c;你的任务是计算这个字符串中有多少个回文子串。 具有不同开始位置或结束位置的子串&#xff0c;即使是由相同的字符组成&#xff0c;也会被计为是不同的子串。 示例 1: 输入: "abc" 输出: 3 解释: 三个回文子串: "a&qu…

Linux安装Docker教程(详解)

如果想要系统学习docker,建议进入官方文档中学习&#xff1a;docker官方文档 一. 基本概念 Docker Desktop 和 Docker Engine 有什么区别&#xff1f; Docker Desktop for Linux 提供用户友好的图形界面&#xff0c;可简化容器和服务的管理。它包括 Docker Engine&#xff0c…

Spark 之 Aggregate

Aggregate 参考链接: https://github.com/PZXWHU/SparkSQL-Kernel-Profiling完整的聚合查询的关键字包括 group by、 cube、 grouping sets 和 rollup 4 种 。 分组语句 group by 后面可以是一个或多个分组表达式( groupingExpressions )。 聚合查询还支持 OLAP 场景下的多…

计算机网络 网络层 2

IP协议&#xff1a; Ip数据报的格式&#xff1a; 首部:分为固定部分 和 可变部分 固定部分是20B 版本&#xff1a;表明了是IPV4还是IPV6 首部长度&#xff1a;单位是 4B&#xff0c;表示的范围是&#xff08;5~15&#xff09;*4B 填充&#xff1a;全0&#xff0c;,让首部变…

Python猜数小游戏

Python 实现的《猜数游戏》 介绍 本文将展示如何使用 Python 编写一个简单的《猜数游戏》。这个游戏将会生成一个1到10之间的随机数&#xff0c;用户有最多三次机会来猜测正确的数字。如果用户猜对了&#xff0c;游戏将结束并显示恭喜信息&#xff1b;如果没有猜对&#xff0…

【网络云SRE运维开发】2025第3周-每日【2025/01/15】小测-【第14章ospf高级配置】理论和实操解析

文章目录 14.1 选择题解题思路和参考答案14.2 理论题解题思路和参考答案14.3 实操题解题思路和参考答案思科&#xff08;Cisco&#xff09;设备华为&#xff08;Huawei&#xff09;设备小米/锐捷&#xff08;或其他支持标准CLI命令的设备&#xff09;通过网络管理工具注意事项 …

SQLite 3.48.0 发布,有哪些更新?

SQLite 开发团队于 2025 年 1 月 14 日发布了 SQLite 3.48.0 版本&#xff0c;我们来解读一下新版本的改进功能。 EXPLAIN QUERY PLAN SQLite 使用 EXPLAIN QUERY PLAN 命令获取查询语句的执行计划&#xff0c;新版本改进了执行计划输出结果中的覆盖索引优化信息&#xff1a;…

JAVA-二叉树的四种遍历

目录 一、二叉树的存储 二、二叉树遍历的概念 1.前序遍历 2.中序遍历 3.后序遍历 4.层序遍历 三、概念面试题 四、代码实现 1.前序遍历 2.中序遍历 3.后序遍历 4.层序遍历 五、其他写法(非递归) 1.非递归前序遍历 2.非递归中序遍历 3.非递归后续遍历 一、二叉树…

Spring FactoryBean到仿照mybatis @Mapper的实现

目录 FactoryBean原理FactoryBean例子org.springframework.beans.factory.support.AbstractBeanFactory#doGetBean mybatis mapper bean的手动实现思考复习下Jdbc传统sql查询做法Mapper接口实现思路复习批量注册beanDefinition: ConfigurationClassPostProcessor自定义实现Mapp…

【Go】Go数据类型详解—数组与切片

1. 前言 今天需要学习的是Go语言当中的数组与切片数据类型。很多编程语言当中都有数组这样的数据类型&#xff0c;Go当中的切片类型本质上也是对 数组的引用。但是在了解如何定义使用数组与切片之前&#xff0c;我们需要思考为什么要引入数组这样的数据结构。 1.1 为什么需要…

flutter Get GetMiddleware 中间件不起作用问题

当使用 get: ^5.0.0-release-candidate-9.2.1最新版本时&#xff0c;中间件GetMiddleware各种教程都是让我们在redirect中实现&#xff0c;比如&#xff1a; overrideRouteSettings? redirect(String? route) {return RouteSettings(name: "/companyAuthIndexPage"…