路由有两种跳转方式：
- 声明式导航
- 编程式导航
这两种传参方式一样，本文只以声明式举例，编程式跳转的
push函数直接取router-link的to属性值即可，如：
声明式写法
<router-link
:to="{
name: 'about',
query: {
name: '张三',
age: 18,
},
}"
>跳转about界面</router-link
>
编程式写法push函数的参数和router-link的to属性值一样
<script setup>
import { useRouter } from "vue-router";
const Router = useRouter();
// 路由跳转点击方法
const toAbout = () => {
Router.push({
name: "about",
query: {
name: "张三",
age: 18,
},
});
};
</script>
一、路径拼接传参如： ?name=张三&age=18
<router-link to="/about?name=张三&age=18">跳转about界面</router-link>
<script setup>
import { useRoute } from "vue-router";
const route = useRoute();
console.log(route.query.name); // 张三
console.log(route.query.age); // 18
</script>
<template>
<h1>姓名：{{ route.query.name }}</h1>
<h1>年龄：{{ route.query.age }}</h1>
</template>
image.png
二、动态路由传参
在
about路由后面拼接/:name/:age定义传参属性name和age
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
// about
{
path: "/about/:name/:age", // /:name/:age定义传参属性name和age
component: import("../views/about/index.vue"),
props: (route) => {
console.log(route); //route 跳转的路由信息
return route.params;
},
},
],
});
<router-link to="/about/张三/18">跳转about界面</router-link>
<script setup>
import { useRoute } from "vue-router";
const route = useRoute();
console.log(route.params.name); // 张三
console.log(route.params.age); // 18
</script>
<template>
<h1>姓名：{{ route.params.name }}</h1>
<h1>年龄：{{ route.params.age }}</h1>
</template>
image.png
三、路由props属性传参
3.1. props为布尔值true
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
// about
{
path: "/about/:name/:age", // /:name/:age定义传参属性name和age
component: import("../views/about/index.vue"),
props: true,
},
],
});
<router-link to="/about/张三/18">跳转about界面</router-link>
<script setup>
import { useRoute } from "vue-router";
const route = useRoute();
const props = defineProps(["name", "age"]);
console.log(props.name); // 张三
console.log(props.age); // 18
</script>
<template>
<h1>姓名：{{ name }}</h1>
<h1>年龄：{{ age }}</h1>
</template>
image.png
3.2. props为一个对象
当props为一个对象，路由参数key和value就定死了
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
// about
{
path: "/about/:name/:age", // /:name/:age定义传参属性name和age
component: import("../views/about/index.vue"),
props: {
name: "王五",
age: 21,
},
},
],
});
image.png
3.3. props为一个函数
函数的参数就是当前的
route对象，可以根据这个路由信息按需返回参数
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
// about
{
path: "/about/:name/:age", // 通过/:name定义传参name /:age定义传参age
component: import("../views/about/index.vue"),
props: (route) => {
console.log(route); //route 跳转的路由信息
return route.params;
},
},
],
});
<router-link to="/about/张三/18">跳转about界面</router-link>
<script setup>
import { useRoute } from "vue-router";
const route = useRoute();
const props = defineProps(["name", "age"]);
console.log(props.name); // 张三
console.log(props.age); // 18
</script>
<template>
<h1>姓名：{{ name }}</h1>
<h1>年龄：{{ age }}</h1>
</template>
image.png
四、query传参
4.1. path + query
<router-link
:to="{
path: '/about',
query: {
name: '张三',
age: 18,
},
}"
>跳转about界面</router-link
>
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
// about
{
path: "/about",
component: import("../views/about/index.vue"),
},
],
});
<script setup>
import { useRoute } from "vue-router";
const route = useRoute();
const props = defineProps(["name", "age"]);
console.log(route.query.name); // 张三
console.log(route.query.age); // 18
</script>
<template>
<h1>姓名：{{ route.query.name }}</h1>
<h1>年龄：{{ route.query.age }}</h1>
</template>
query传参的特点参数会在路由路径后面
?key1=value&key2=value的形式展示
image.png
4.2. name + query
为路由添加
name属性
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
// about
{
path: "/about",
name: "about", //必须
component: import("../views/about/index.vue"),
},
],
});
<router-link
:to="{
name: 'about',
query: {
name: '张三',
age: 18,
},
}"
>跳转about界面</router-link
>
五、params传参
如果提供了 path，params 会被忽略，也就是说
path不可以和params共存
错误写法
route对象中query和params都取不到
<router-link
:to="{
path: '/about',
params: {
name: '张三',
age: 18,
},
}"
>跳转about界面</router-link
>
4.1. 正确写法：name+params传参
- 为路由添加
name属性--name跳转- 在
about路由后面拼接/:name/:age定义传参属性name和age（必须）
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
// about
{
path: "/about/:name/:age",
name: "about", // 为路由添加name属性--name跳转
component: import("../views/about/index.vue"),
},
],
});
<router-link
:to="{
name: 'about',
params: {
name: '张三',
age: 18,
},
}"
>跳转about界面</router-link
>
<script setup>
import { useRoute } from "vue-router";
const route = useRoute();
const props = defineProps(["name", "age"]);
console.log(route.params.name); // 张三
console.log(route.params.age); // 18
</script>
<template>
<h1>姓名：{{ route.params.name }}</h1>
<h1>年龄：{{ route.params.age }}</h1>
</template>
