网站主题 模板,峡江网站建设,小县城做婚礼网站,uc浏览器网页版入口日期：2024年7月17日 作者：Commas 签名：(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^ 1.01365 = 37.7834；0.99365 = 0.0255 1.02365 = 1377.408… 日期：2024年7月17日 作者：Commas 签名：(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^ 1.01365 = 37.7834；0.99365 = 0.0255 1.02365 = 1377.4083；0.98365 = 0.0006 说在最前面：本文 vue3 的示例代码，在没有另外声名的情况下，均采用 script setup 组合式代码风格，风格统一，避免混乱，请各位新老食客放心食用哈 ^ _ ^ 文章目录 一、前言二、Vue-Router的三种传参方式1、使用params传递参数（1）编程式路由传参（1-1）在组件中使用编程式路由传递参数（1-2）在目标组件中获取参数 （2）声明式路由传参（2-1）在组件中使用声明式路由传递参数（2-2）在目标组件中获取参数 2、使用query传递参数（1）编程式路由传参（1-1）在组件中使用编程式路由传递参数（1-2）在目标组件中获取参数 （2）声明式路由传参（2-1）在组件中使用声明式路由传递参数（2-2）在目标组件中获取参数 3、使用props传递参数（1）路由配置（1-1）params参数作为props传递给路由组件（1-2）query参数作为props传递给路由组件 （2）在目标组件中接收参数（3）示例（3-1）用户列表组件（3-2）用户详情组件 三、结语 一、前言
在 vue3 中，vue-router 是用来管理前端路由的库。路由传参是指在页面间传递数据的一种常用方法，它可以帮助我们在不同的视图组件之间传递状态或数据。vue-router 提供了几种不同的方式来实现路由传参，包括 params、query 和 props。
二、Vue-Router的三种传参方式
1、使用params传递参数
params 是在路由配置中定义的动态段，它们不是 URL 的一部分，因此在刷新页面时不会丢失。params 通常用于传递路由路径中的参数。
说明：配置并创建路由 路径：\src\router\index.ts
import { createRouter, createWebHistory } from 'vue-router'// 路由配置
const routes = [{name:home,path: '/home',component: HomeView},{name:user,path: '/user/:userId',// 加?表示该传参为可选参数，如下，age为可选参数：// path: '/user/:userId/:age?', component: UserView}
];// 创建路由
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: routes
})export default router（1）编程式路由传参
（1-1）在组件中使用编程式路由传递参数
路径：\src\views\HomeView.vue
// 在组件中使用编程式路由传递参数
script setup lang="ts"
import { useRouter } from 'vue-router';
const router = useRouter();router.push({// params 传递参数方式，不支持使用 path，只能用 namename: 'user',params: { userId: '123' }
});
/script（1-2）在目标组件中获取参数
路径：\src\views\UserView.vue
script setup lang="ts"
