如何使嵌套路由继承父级的属性？

Posted 2023-02-16

【中文标题】如何使嵌套路由继承父级的属性？

【英文标题】：How to make nested routes inherit properties from the parent?

【发布时间】：2021-11-19 00:17:22

【问题描述】：

有没有办法在嵌套路由中不重复元属性。

    path: "/dashboard/users",
    component: UserIndex,
    meta: 
      layout: "UserLayout",
      title: "User Dashboard",
      middleware: [auth]
    ,
    children: [
      
        path: '',
        name: 'users',
        component: Users
      
    ],
  

【参考方案1】：

取决于您使用的 vue-router 版本。您似乎正在使用 vue-router 2.x 或 3.x，并且文档建议使用不同的方式访问父路由元对象。

来自父母的元属性确实与 vue-router 1.x 中的子元属性合并，但在 vue-router 2.x 和 3.x 中没有。 见https://github.com/vuejs/vue-router/issues/704

父母的元属性确实保留在路由中，因此文档建议检查全局 beforeEach 导航守卫中的元字段。 例如，使用以下方式获取父级的中间件元值：

if to.matched.some(record => record.meta.middleware) ...

请参阅文档：https://router.vuejs.org/guide/advanced/meta.html（您可能可以在这样的保护中动态地将所有父路由元属性添加到子路由，这将是解决您的问题的一种方法，但我没有对此进行测试）。

Vue-router 4.x 再次非递归地合并父子元属性。参见文档：https://next.router.vuejs.org/guide/advanced/meta.html

另请注意，vue-router 4.x 旨在与 vue 3.x 一起使用。目前npm install vue-router 将安装 3.x 版本的 vue-router。 现在您需要明确使用npm install vue-router@4 来安装 4.x 版本。

【讨论】：

我认为分配给 record.meta 是不可能的。