Vue Router中按子路由给同一父组件传递不同Props的方案

方案一：利用路由元信息（Meta）+ 计算属性 #

这是最直观且易维护的方案，通过给子路由标记专属的邮箱信息，在父组件中动态读取：

1. 修改路由配置，添加meta字段

const routes = [
  {
    path: '/',
    component: MainApp,
    children: [
      { path: 'one', component: One, meta: { footerEmail: 'email1@gmail.com' } },
      { path: 'two', component: Two, meta: { footerEmail: 'email1@gmail.com' } },
      { path: 'three', component: Three, meta: { footerEmail: 'email2@gmail.com' } }
    ]
  }
]

2. 在MainApp组件中动态获取邮箱
   Vue 2选项式API写法：

<template>
  <div class="main-app">
    <router-view />
    <Footer :email="currentFooterEmail" />
  </div>
</template>

<script>
export default {
  computed: {
    currentFooterEmail() {
      // 读取当前路由的meta信息，可加默认值避免空值
      return this.$route.meta.footerEmail || 'default@example.com';
    }
  }
}
</script>

Vue 3组合式API写法：

<template>
  <div class="main-app">
    <router-view />
    <Footer :email="currentFooterEmail" />
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const currentFooterEmail = computed(() => route.meta.footerEmail || 'default@example.com');
</script>

方案二：通过父路由动态props传递 #

直接在路由配置中根据当前子路由路径，动态给MainApp传递email props：

1. 修改路由配置

const routes = [
  {
    path: '/',
    component: MainApp,
    // 用函数返回动态props，根据当前路由路径判断邮箱
    props: (route) => {
      const targetPaths = ['/one', '/two'];
      return {
        email: targetPaths.includes(route.path) ? 'email1@gmail.com' : 'email2@gmail.com'
      };
    },
    children: [
      { path: 'one', component: One },
      { path: 'two', component: Two },
      { path: 'three', component: Three }
    ]
  }
]

2. MainApp接收props并传递给Footer

<template>
  <div class="main-app">
    <router-view />
    <Footer :email="email" />
  </div>
</template>

<script>
export default {
  props: {
    email: {
      type: String,
      required: true
    }
  }
}
</script>

为什么你之前的方案无效？ #

1. 拆分路由合并：同一父路由的配置在合并时会被覆盖，路由系统无法根据子路由区分不同的父组件props，所以这种方式无法实现需求。
2. beforeEnter修改$props：组件的props是单向数据流，直接修改$props不会触发响应式更新，而且违反Vue的设计原则，正确的做法是通过数据驱动的方式（比如修改状态、读取路由信息）来更新props值。

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