嵌套路由如何继承父路由属性，避免重复编写meta属性？

方案1：运行时动态合并（无需修改路由配置，Vue Router/React Router均适用） #

绝大多数前端路由框架都会在路由匹配时返回完整的路由匹配链，你可以直接在全局路由守卫、布局组件中合并所有层级的meta属性，子路由的同名字段会自动覆盖父级配置：

Vue Router 示例代码 #

router.beforeEach((to, from, next) => {
  // 合并从根路由到当前子路由的所有meta
  const finalMeta = to.matched.reduce((total, current) => ({...total, ...current.meta}), {})
  // 直接使用合并后的meta即可，比如设置标题、指定布局、执行中间件
  document.title = finalMeta.title
  next()
})

在组件内获取合并后meta的写法：

import { useRoute } from 'vue-router'
const route = useRoute()
const finalMeta = computed(() => route.matched.reduce((total, current) => ({...total, ...current.meta}), {}))

React Router 示例代码 #

// 在路由守卫或布局组件中通过matchPath获取所有匹配路由的meta
import { matchPath, useLocation } from 'react-router-dom'

function useMergedMeta(routes) {
  const { pathname } = useLocation()
  return routes.reduce((meta, route) => {
    if (matchPath({ path: route.path }, pathname)) {
      return {...meta, ...route.meta}
    }
    if (route.children) {
      return {...meta, ...useMergedMeta(route.children)}
    }
    return meta
  }, {})
}

方案2：预编译时注入（提前把父级meta写入子路由配置） #

如果你希望子路由本身就携带完整的meta属性，可以封装路由配置生成工具，在注册路由前自动把父级meta注入到所有后代路由中：

function injectParentMeta(route, parentMeta = {}) {
  // 合并当前路由与父级的meta
  const currentMeta = {...parentMeta, ...route.meta}
  const processedRoute = {...route, meta: currentMeta}
  // 递归处理子路由
  if (route.children) {
    processedRoute.children = route.children.map(child => injectParentMeta(child, currentMeta))
  }
  return processedRoute
}

// 使用示例
const routes = [
  injectParentMeta({
    path: "/dashboard/users",
    component: UserIndex,
    meta: {
      layout: "UserLayout",
      title: "User Dashboard",
      middleware: [auth]
    },
    children: [
      {
        path: '',
        name: 'users',
        component: Users
      }
    ]
  })
]

以上两种方案都可以完全避免在子路由中重复编写相同的meta配置，如果子路由需要单独覆盖某个属性，直接在子路由的meta中声明同名字段即可。

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