Vue Router能否传递自定义Props参数？复用组件路由传参需求

阿华AIGC实验室

2026-5-9

在Vue Router中传递静态Props给组件的解决方案

当然可以实现你想要的效果！你提到的通过Vue Router直接给可复用组件传递静态参数（就像直接在组件标签上传props那样），其实是Vue Router官方支持的用法，只是可能很多教程没重点讲这个场景~

直接用静态对象传递Props

你写的代码思路其实是完全正确的！当把路由的props配置设为一个对象时，这个对象里的键值对会直接作为静态props传递给目标组件，完全符合你期望的<Nav api='/api/allBooks'></Nav>的传参效果。

举个完整的例子：

// 路由配置
const routes = [
  {
    path: '/books',
    component: () => import('./Pages/Book-highlights/Nav/index.js'),
    // 静态对象形式的props，直接传递给组件
    props: { api: '/api/allBooks' }
  },
  // 可以给同一个组件配置不同路由，传递不同的api参数
  {
    path: '/articles',
    component: () => import('./Pages/Book-highlights/Nav/index.js'),
    props: { api: '/api/allArticles' }
  }
]
const router = new VueRouter({ routes })

然后在你的Nav组件里，只需要正常声明api这个props，就能直接使用它发起请求了：

Vue 2 组件示例

<template>
  <!-- 组件内容 -->
</template>
<script>
export default {
  props: {
    api: {
      type: String,
      required: true // 根据你的需求设置是否必填
    }
  },
  created() {
    // 使用props里的api发起请求
    this.fetchData()
  },
  methods: {
    async fetchData() {
      const res = await fetch(this.api)
      const data = await res.json()
      // 处理数据逻辑
    }
  }
}
</script>

Vue 3 组件示例（Setup语法）

<template>
  <!-- 组件内容 -->
</template>
<script setup>
import { onMounted } from 'vue'

// 声明props
const props = defineProps({
  api: {
    type: String,
    required: true
  }
})

// 发起请求
onMounted(async () => {
  const res = await fetch(props.api)
  const data = await res.json()
  // 处理数据逻辑
})
</script>

进阶：结合URL参数和静态参数

如果后续你需要同时传递静态参数和URL里的动态参数（比如/books/:id），可以使用props的函数模式，动态生成props：

const routes = [
  {
    path: '/books/:category',
    component: () => import('./Pages/Book-highlights/Nav/index.js'),
    props: route => ({
      // 静态参数
      baseApi: '/api/books',
      // 从路由参数里获取动态值
      category: route.params.category
    })
  }
]