Vue-Router4路由传参详解

一、路由有两种跳转方式

• 声明式导航
• 编程式导航

这两种传参方式一样，本文只以声明式举例，编程式跳转的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属性传参

4.1. props为布尔值true

只能接收params参数

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>

4.3. 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,
      },
    },
  ],
});

4.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传参

5.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的形式展示

5.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共存

6.1. 错误写法

route对象中query和params都取不到

<router-link
  :to="{
    path: '/about',
    params: {
      name: '张三',
      age: 18,
    },
  }"
  >跳转about界面</router-link
>

6.2. 正确写法：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>