如何优雅地传递路由参数到组件中？使用Vue Router 的 props 配置

在 Vue.js 中，路由参数（params 和 query）的传递是开发中常见的需求。通常，我们会在组件内部通过 useRoute 或 this.$route 来获取这些参数。然而，这种方式可能会让代码显得冗长且不够优雅。那么，有没有更简洁、更优雅的方式来传递路由参数呢？

答案是：使用 Vue Router 的 props 配置。通过 props 配置，我们可以直接将路由参数作为组件的 props 传递，从而简化代码并提高可维护性。

一、问题引入

假设你正在开发一个新闻应用，包含以下功能：

1. 新闻列表页面：显示新闻标题列表。

2. 新闻详情页面：点击新闻标题时，显示该新闻的详细内容。

3. 传参：通过路由参数传递新闻的 id、title 和 content。

那么，如何优雅地传递这些参数到新闻详情组件中呢？

二、props 配置的三种写法

1. 布尔值写法（props: true）

这种方式将所有 params 参数作为 props 传递给路由组件。它只能处理 params 参数，不能处理 query 参数。

路由规则：

TypeScript复制

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../pages/Home.vue';
import About from '../pages/About.vue';
import News from '../pages/News.vue';
import Detail from '../pages/Detail.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  {
    path: '/news',
    component: News,
    children: [
      { path: 'detail/:id/:title/:content', component: Detail, name: 'Detail', props: true },
    ],
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

路由规则中配置props为true

Detail.vue：

vue复制

<template>
  <div>
    <h3>新闻详情</h3>
    <p>ID: {{ props.id }}</p>
    <p>标题: {{ props.title }}</p>
    <p>内容: {{ props.content }}</p>
  </div>
</template>

<script>
import { defineProps } from 'vue';

export default {
  setup() {
    const props = defineProps({
      id: String,
      title: String,
      content: String,
    });

    return { props };
  },
};
</script>

优点：

• 简洁，自动将 params 参数作为 props 传递。

• 代码清晰，易于维护。

缺点：

• 只能处理 params 参数，不能处理 query 参数。

这里要说一下，defineProps 是 Vue 3 Composition API 中的一个新特性，用于在 setup 函数中定义 props。它提供了一种更灵活的方式来定义组件的属性。如果使用的是 Composition API，推荐使用 defineProps，因为它提供了更灵活的语法和动态定义的能力。

2. 函数写法（props: (route) => {}）

这种方式允许你自定义如何将路由参数作为 props 传递给路由组件。你可以访问 route 对象，从而处理 params 或 query 参数。

路由规则：

TypeScript复制

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../pages/Home.vue';
import About from '../pages/About.vue';
import News from '../pages/News.vue';
import Detail from '../pages/Detail.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  {
    path: '/news',
    component: News,
    children: [
      {
        path: 'detail/:id/:title/:content',
        component: Detail,
        name: 'Detail',
        props: (route) => ({
          id: route.params.id,
          title: route.params.title,
          content: route.params.content,
        }),
      },
    ],
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

Detail.vue：

vue复制

<template>
  <div>
    <h3>新闻详情</h3>
    <p>ID: {{ id }}</p>
    <p>标题: {{ title }}</p>
    <p>内容: {{ content }}</p>
  </div>
</template>

<script>
export default {
  props: ['id', 'title', 'content'],
};
</script>

优点：

• 灵活，可以处理 params 和 query 参数。

• 可以自定义如何传递参数。

缺点：

• 代码稍显复杂，需要手动处理参数。

3. 对象写法（props: { a: 100, b: 200, c: 300 }）

这种方式允许你直接定义一个对象作为 props 传递给路由组件。这种方式较少使用，因为它不能动态处理路由参数。

路由规则：

TypeScript复制

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../pages/Home.vue';
import About from '../pages/About.vue';
import News from '../pages/News.vue';
import Detail from '../pages/Detail.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  {
    path: '/news',
    component: News,
    children: [
      {
        path: 'detail/:id/:title/:content',
        component: Detail,
        name: 'Detail',
        props: { a: 100, b: 200, c: 300 },
      },
    ],
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

Detail.vue：

vue复制

<template>
  <div>
    <h3>新闻详情</h3>
    <p>a: {{ a }}</p>
    <p>b: {{ b }}</p>
    <p>c: {{ c }}</p>
  </div>
</template>

<script>
export default {
  props: ['a', 'b', 'c'],
};
</script>

优点：

• 简单，直接定义 props。

缺点：

• 不能动态处理路由参数，灵活性差。

三、注意事项

4. 布尔值写法：

• 只能处理 params 参数，不能处理 query 参数。

• 需要在路由规则中为 params 参数占位。

5. 函数写法：

• 可以处理 params 和 query 参数。

• 需要手动处理参数。

6. 对象写法：

• 不能动态处理路由参数。

• 适用于静态 props。

7. props 配置的作用：

• 将路由参数自动转换为组件的 props，简化代码。

• 避免手动处理路由参数。

四、总结

说白了，使用 props 配置可以简化参数的传递。使代码更加优雅和灵活。

• 布尔值写法：适用于处理 params 参数，代码简洁。

• 函数写法：适用于处理 params 和 query 参数，灵活性高。

• 对象写法：适用于静态 props，灵活性差。