日期: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,只能用 name
name: 'user',
params: {
userId: '123' }
});
</script>
(1-2)在目标组件中获取参数
路径:\src\views\UserView.vue
<script setup lang="ts"