Vue Router 传递参数详解
Vue Router 支持多种方式来在不同页面间传递参数，本文将详细介绍 query 参数和 params 参数的不同传递方式，并提供一些实用技巧。
Query 参数
query 参数通常用于传递临时性的数据，这些数据通常出现在 URL 的查询字符串中。
路径字符串拼接（不推荐）
传参
在路由路径后直接拼接 ?参数名=参数值，多组参数间使用 & 分隔。
<RouterLink to="/path/path1?name=小明&age=18"></RouterLink>
如果参数值为变量，需要使用模板字符串。
<template>
<RouterLink :to="`/path/path1?name=${str}&age=18`"></RouterLink>
</template>
<script>
let str = "小明";
</script>
接收与使用
import { useRoute } from "vue-router";
const route = useRoute();
<div>{{ route.query.name }}</div>
<div>{{ route.query.age }}</div>
to 传对象写法（推荐）
传参
使用对象代替字符串来传递 query 参数。
<RouterLink :to="{
path: '/path/path1',
query: {
name: '小明',
age: 18
}
}"/>
接收与使用
// 接收
import { useRoute } from "vue-router" const route = useRoute()
// 使用
{{ route.query.name }}
{{ route.query.age }}
Params 参数
params 参数需要在路由规则中提前声明参数名，这些参数通常出现在 URL 的路径部分。
由于age后添加了问号，所以age为可传参数，否则未传age会报错。
{ path:"/path",
component: Comp1
children:[
{ path:'path1/:name/:age?',component: Comp2 }
]
}
路径字符串拼接（不推荐）
传参
在路由路径后直接拼接 /参数值。
<RouterLink to="/path/path1/小明/18"></RouterLink>
参数值如果是变量，使用模板字符串。
<template>
<RouterLink :to="`/path/path1/${str}/18`"></RouterLink>
</template>
<script>
let str = "小明";
</script>
接收与使用
import { useRoute } from "vue-router";
const route = useRoute();
<div>{{ route.params.name }}</div>
<div>{{ route.params.age }}</div>
to 传对象写法（推荐）
传参
使用对象代替字符串来传递 params 参数。需要注意的是，如果使用 path，将会报警告，推荐使用 name。
<RouterLink :to="{
name: 'path1Name',
params: {
name: '小明',
age: 18
}
}"/>
注意：params参数不能传数组或对象，否则会报警告。
接收与使用
import { useRoute } from "vue-router";
const route = useRoute();
<div>{{ route.params.name }}</div>
<div>{{ route.params.age }}</div>
编程式导航（推荐使用）
编程式导航是一种更常用的导航方式，它使用函数形式进行路由跳转，比声明式导航更为灵活。
import { useRouter } from "vue-router";
const router = useRouter();
function handleNavigation() {
router.push({
name: 'xxx',
query: { name: '小明', age: 18 }
});
}
注意：router有两种方式，分别为push和replace，push会保留历史记录，replace不会保留历史记录。
如何简化参数使用
方法一：解构配合 toRefs
如果需要解构 query 或 params 对象，为了保持响应式，需要使用 toRefs。否则变量会丢失响应式。
import { useRoute } from "vue-router";
import { toRefs } from "vue";
const route = useRoute();
const { query } = toRefs(route);
<div>{{ query.name }}</div>
方法二：路由的 props 配置
一：将所有 params 参数作为 props 传给路由组件
在路由规则中添加 props: true。
{ path: '/path/path1/:name/:age', component: Comp2, props: true }
在组件中使用 defineProps 来接收参数。
<script setup>
defineProps(['name', 'age']);
</script>
<template>
<div>{{ name }}</div>
<div>{{ age }}</div>
</template>
二：处理 query 参数
使用函数形式来处理 query 参数。
{
path: '/path/path1/:name/:age',
component: Comp2,
props: (route) => ({ ...route.query })
}
同样地，组件中使用 defineProps 来接收参数。
<script setup>
defineProps(['name', 'age']);
</script>
<template>
<div>{{ name }}</div>
<div>{{ age }}</div>
</template>
总结
- 路由导航分为声明式导航和编程式导航。
- 编程式导航有两种方式：
push和replace，其中push会保留历史记录（浏览器可回退），而replace不会保留历史记录。 query参数和params参数均支持「拼接字符串写法」和「对象写法」，但更推荐使用to传对象的方式。query参数的拼接字符串写法是在路径后添加?参数名=参数值，多组参数间以&分隔。params参数的拼接字符串写法是在路径后直接/参数值，但需要在路由规则中提前声明参数名，格式为path/:参数名，如果为可选参数，在参数名后添加问号。- 对于
params参数，对象写法中只能使用name而不是path。
