使用vue-router时如何从父路由继承props并传递给所有子组件

问题本质 #

vue-router的props配置仅作用于当前路由对应的组件，不会向下继承给子路由。父级路由的参数转换逻辑只会在渲染父级组件时执行，子路由设置props: true时只会直接读取原始的route.params（所有路径参数默认都是字符串类型），自然拿不到父级转换后的整数id。

可行解决方案 #

以下方案按改造成本从低到高排序：

方案1：抽取公共转换函数复用

把id转整数的逻辑抽成公共函数，所有需要的路由直接引用即可，无需重复编写逻辑：

// 公共逻辑抽离
const parseIdProps = route => ({
  id: parseInt(route.params.id, 10)
})

// 路由配置
{
  path: '/',
  component: GrandparentComponent,
  name: 'main',
  children: [{
    path: ':id',
    component: ParentComponent,
    name: 'main.parent',
    props: parseIdProps,
    children: [{
      path: 'details',
      name: 'main.parent.child',
      component: ChildComponent,
      props: parseIdProps, // 直接引用公共函数
      children: [{
        // 更深层的子路由需要时同样直接引用即可
      }]
    }]
  }]
}

该方案逻辑清晰，后续调整参数转换规则时只需修改一处即可全局生效。

方案2：全局守卫统一预处理参数

如果项目中有大量路由需要做id转整数处理，可以直接在全局前置守卫里统一转换参数类型，后续所有路由只要设置props: true就能拿到正确类型的参数：

import { createRouter } from 'vue-router'
const router = createRouter({
  // 你的基础路由配置
})

router.beforeEach((to, from, next) => {
  // 可额外加路由前缀/meta标记判断，避免误改其他不需要转换的id参数
  if (to.params.id) {
    to.params.id = parseInt(to.params.id, 10)
  }
  next()
})

方案3：父组件透传参数给子路由视图

如果不想修改路由层配置，可以在父级组件ParentComponent中拿到转换后的id，通过<router-view>透传给子路由对应的组件：

<!-- ParentComponent.vue -->
<script setup>
const props = defineProps(['id'])
</script>

<template>
  <!-- 父组件自身业务内容 -->
  <router-view :id="id" />
</template>

该方案适合子路由数量少、不想改动全局路由逻辑的场景。

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