路由有兩種跳轉方式：
- 聲明式導航
- 編程式導航
這兩種傳參方式一樣腮介，本文只以聲明式舉例纳击，編程式跳轉的
push函數(shù)直接取router-link的to屬性值即可秋忙，如：
聲明式寫法
<router-link
:to="{
name: 'about',
query: {
name: '張三',
age: 18,
},
}"
>跳轉about界面</router-link
>
編程式寫法push函數(shù)的參數(shù)和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
二柔昼、動態(tài)路由傳參
在
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為一個對象布近，路由參數(shù)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為一個函數(shù)
函數(shù)的參數(shù)就是當前的
route對象，可以根據(jù)這個路由信息按需返回參數(shù)
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傳參的特點參數(shù)會在路由路徑后面
?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>
