路由有两种跳转方式:
- 声明式导航
- 编程式导航
这两种传参方式一样,本文只以声明式举例,编程式跳转的
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>
二、动态路由传参
在
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>
三、路由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>
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,
},
},
],
});
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>
四、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
的形式展示
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>