Vue.js中如何通过Vue Router给路由组件传递Props？

核心问题定位 #

你控制台报错Missing required prop: slug，说明**appDropdown.vue根本没接收到父组件传递的slug值**，这是所有问题的根源，先解决这个基础问题，再梳理后续组件间的传递逻辑。

分步排查与解决 #

1. 确认路由与父组件的传值逻辑

首先确保路由配置和父组件传递slug的步骤正确：

• 路由必须包含slug参数，且props: true配置对应正确的路由项：

  const routes = [
    // 假设你的父页面是分类页，路由带slug参数
    {
      path: '/category/:slug',
      name: 'CategoryPage',
      component: CategoryPage,
      props: true // 自动把路由参数转为组件props
    }
  ]
  

• 父组件（比如CategoryPage.vue）要先拿到路由传递的slug，再传给appDropdown：

  <template>
    <!-- 注意这里是:slug="slug"，绑定父组件的props值 -->
    <app-dropdown :slug="slug"></app-dropdown>
  </template>
  
  <script>
  import AppDropdown from './appDropdown.vue'
  
  export default {
    name: 'CategoryPage',
    props: ['slug'], // 从路由接收slug参数
    components: { AppDropdown }
  }
  </script>
  

• 在appDropdown.vue的created钩子中打印this.slug，确认是否有值：

  created() {
    console.log('appDropdown接收的slug:', this.slug)
  }
  

2. 简化组件间的传值逻辑，放弃过度复杂的provide/inject

你的组件层级应该是appDropdown -> appDropdownContent -> appDropdownItem，这种层级用逐层传递Props比provide/inject更直观，不容易出错：

• appDropdown.vue：定义必填slug，传给子组件

  <template>
    <div class="dropdown">
      <app-dropdown-content :slug="slug"></app-dropdown-content>
    </div>
  </template>
  
  <script>
  import AppDropdownContent from './appDropdownContent.vue'
  
  export default {
    name: 'AppDropdown',
    props: {
      slug: {
        type: String,
        required: true
      }
    },
    components: { AppDropdownContent }
  }
  </script>
  

• appDropdownContent.vue：接收slug，继续传给appDropdownItem

  <template>
    <div class="dropdown-content">
      <app-dropdown-item :slug="slug" text="Cooling"></app-dropdown-item>
    </div>
  </template>
  
  <script>
  import AppDropdownItem from './appDropdownItem.vue'
  
  export default {
    name: 'AppDropdownContent',
    props: ['slug'],
    components: { AppDropdownItem }
  }
  </script>
  

• appDropdownItem.vue：接收slug，生成导航链接

  <template>
    <router-link :to="`/category/${slug}`">{{ text }}</router-link>
  </template>
  
  <script>
  export default {
    name: 'AppDropdownItem',
    props: ['slug', 'text']
  }
  </script>
  

3. 若需跨多层组件传值，再用provide/inject优化

如果后续组件层级变深，不想逐层传Props，可以用provide/inject，但要注意响应性：

• 在appDropdown.vue中提供slug：

  // Vue2 写法（非响应式，若slug变化需额外处理）
  provide() {
    return {
      slug: this.slug
    }
  }
  
  // Vue3 写法（保持响应性）
  import { ref, provide } from 'vue'
  export default {
    props: { slug: { type: String, required: true } },
    setup(props) {
      const slug = ref(props.slug)
      provide('slug', slug)
      return {}
    }
  }
  

• 在子组件中注入：

  // Vue2
  inject: ['slug']
  
  // Vue3
  import { inject } from 'vue'
  export default {
    setup() {
      const slug = inject('slug')
      return { slug }
    }
  }
  

内容的提问来源于stack exchange，提问作者CRUX56