【vue3|第18期】Vue-Router路由的三种传参方式

日期：2024年7月17日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 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">
import {
    useRoute } from