路由有兩種跳轉(zhuǎn)方式：

• 聲明式導(dǎo)航
• 編程式導(dǎo)航

這兩種傳參方式一樣，本文只以聲明式舉例，編程式跳轉(zhuǎn)的push函數(shù)直接取router-link的to屬性值即可，如：

聲明式寫法

<router-link
  :to="{
    name: 'about',
    query: {
      name: '張三',
      age: 18,
    },
  }"
  >跳轉(zhuǎn)about界面</router-link
>

編程式寫法push函數(shù)的參數(shù)和router-link的to屬性值一樣

<script setup>
import { useRouter } from "vue-router";
const Router = useRouter();
// 路由跳轉(zhuǎn)點(diǎn)擊方法
const toAbout = () => {
  Router.push({
    name: "about",
    query: {
      name: "張三",
      age: 18,
    },
  });
};
</script>

一、路徑拼接傳參如： ?name=張三&age=18

<router-link to="/about?name=張三&age=18">跳轉(zhuǎn)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

二、動(dòng)態(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 跳轉(zhuǎn)的路由信息
        return route.params;
      },
    },
  ],
});

<router-link to="/about/張三/18">跳轉(zhuǎn)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">跳轉(zhuǎn)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為一個(gè)對(duì)象

當(dāng)props為一個(gè)對(duì)象，路由參數(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為一個(gè)函數(shù)

函數(shù)的參數(shù)就是當(dāng)前的route對(duì)象，可以根據(jù)這個(gè)路由信息按需返回參數(shù)

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    // about
    {
      path: "/about/:name/:age", // 通過(guò)/:name定義傳參name /:age定義傳參age
      component: import("../views/about/index.vue"),
      props: (route) => {
        console.log(route); //route 跳轉(zhuǎn)的路由信息
        return route.params;
      },
    },
  ],
});

<router-link to="/about/張三/18">跳轉(zhuǎn)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,
    },
  }"
  >跳轉(zhuǎn)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傳參的特點(diǎn)參數(shù)會(huì)在路由路徑后面?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,
    },
  }"
  >跳轉(zhuǎn)about界面</router-link
>

五、params傳參

如果提供了 path，params 會(huì)被忽略，也就是說(shuō) path不可以和params共存

錯(cuò)誤寫法

route對(duì)象中query和params都取不到

<router-link
  :to="{
    path: '/about',
    params: {
      name: '張三',
      age: 18,
    },
  }"
  >跳轉(zhuǎn)about界面</router-link
>

4.1. 正確寫法：name+params傳參

• 為路由添加name屬性--name跳轉(zhuǎn)
• 在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跳轉(zhuǎn)
      component: import("../views/about/index.vue"),
    },
  ],
});

<router-link
  :to="{
    name: 'about',
    params: {
      name: '張三',
      age: 18,
    },
  }"
  >跳轉(zhuǎn)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>