【vue3|第18期】Vue-Router路由的三种传参方式
日期:2024年7月17日
作者:Commas
签名:(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释:如果您觉得有所帮助
,帮忙点个赞
,也可以关注我
,我们一起成长;如果有不对的地方,还望各位大佬不吝赐教,谢谢^ - ^
1.01365 = 37.7834;0.99365 = 0.0255
1.02365 = 1377.4083;0.98365 = 0.0006
说在最前面:本文
vue3
的示例代码,在没有另外声名的情况下,均采用<script setup>
组合式代码风格,风格统一,避免混乱,请各位新老食客放心食用哈 ^ _ ^
一、前言
在 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,只能用 name
name: 'user',
params: {
userId: '123' }
});
</script>
(1-2)在目标组件中获取参数
路径:\src\views\UserView.vue
<script setup lang="ts"
原文地址:https://blog.csdn.net/qq_35844043/article/details/140492474
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!