网站主题 模板,峡江网站建设,小县城做婚礼网站,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"