彻底学会路由传参的那几种方式，再也不怕被拷打了

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。

+友情链接