如何使用 vue-router 从父路由继承 props

Question

我有以下路由器配置，并希望将main.parent 路由的id 转换为整数，然后传递给所有子组件的子组件（给定props: true）。

{
  path: '/',
  component: GrandparentComponent,
  name: 'main',
  children: [{
    path: ':id',
    component: ParentComponent,
    name: 'main.parent',
    props: route => {
      return {
        // parse URL id to int
        id: parseInt(route.params.id, 10)
      };
    },

    children: [{
      path: 'details',
      name: 'main.parent.child',
      component: ChildComponent,
      props: true,
      children: [{
        ...
      }]
    }]
  }]
}

但是，似乎route function 只被调用一次（在评估/:id 时），而不是在评估/:id/details 时。 vue-router 中的相关代码似乎证实了这一点。

            const route = routeToDisplay.value;
            const matchedRoute = matchedRouteRef.value;
            const ViewComponent = matchedRoute && matchedRoute.components[props.name];
            // we need the value at the time we render because when we unmount, we
            // navigated to a different location so the value is different
            const currentName = props.name;
            if (!ViewComponent) {
                return normalizeSlot(slots.default, { Component: ViewComponent, route });
            }
            // props from route configuration
            const routePropsOption = matchedRoute.props[props.name];
            const routeProps = routePropsOption
                ? routePropsOption === true
                    ? route.params
                    : typeof routePropsOption === 'function'
                        ? routePropsOption(route)
                        : routePropsOption
                : null;
            ...
            const component = h(ViewComponent, assign({}, routeProps, attrs, {
                onVnodeUnmounted,
                ref: viewRef,
            }));
            ...

我想知道是否有人尝试解决同样的问题，以及他们想出了什么解决方案。理想情况下，我想避免为每个子路由重复 props 函数。

Answer 1

在 Vue Router 中没有这样的功能可以通过这种方式将 props 传递给子路由。

相反，您可以使用provide/inject 来有效地执行此操作。父级将provide id 属性，任何后代都可以inject 它：

1. 在ParentComponent.vue 中，在props 上使用toRefs() 以获得对id 属性的反应性ref。
2. 使用provide() 将id 提供给任何子路由（包括子路由）。
3. 在<router-view> 上应用key 以确保根据唯一的id 重新渲染视图。
4. 在ChildComponent.vue 中，使用inject 属性从第2 步注入id。

// ParentComponent.vue
<script>
/* Composition API */
import { provide, toRefs } from 'vue'

export default {
  props: ['id'],
  setup(props) {
    const { id } = toRefs(props)
    provide('id', id)
  },
}

/* Options API */
import { toRefs } from 'vue'

export default {
  props: ['id'],
  provide() {
    const { id } = toRefs(this.$props)
    return { id }
  },
}
</script>

<template>
  <router-view :key="id" />
</template>

// ChildComponent.vue
<script>
export default {
  inject: ['id'],
}
</script>

<template>
  <h2>Detail {{ id }}</h2>
</template>

Composition API demo

Options API demo