嵌套路由：导航到传递父参数的命名路由答案

【问题标题】：Nested route: Navigate to named route passing parent params嵌套路由：导航到传递父参数的命名路由
【发布时间】：2022-01-11 13:29:07
【问题描述】：

我有一个这样的嵌套路由：

  {
    path: '/product/:language',
    name: 'LandingHome',
    component: () => import(/* webpackChunkName: "LandingHome" */ '../views/landings/Base.vue'),
    props:true,
    children: [
      {
        path: '',
        name: 'LandingHome',
        component: () => import(/* webpackChunkName: "LandingHome" */ '../views/landings/Home.vue'),
      },
      {
        path: 'customers',
        name: 'LandingCustomers',
        component: () => import(/* webpackChunkName: "LandingCustomers" */ '../views/landings/Customers.vue'),
      },
    ]
  },

我如何将路由推送到命名路由“LandingCustomers”但同时传递“LandingHome”：语言参数？

this.$router.push({name: "LandingCustomers", params: { language: locale })

正如预期的语言参数传递给子路由，但是如何在推送给子路由的同时将参数语言传递给父路由？

谢谢，祝你有美好的一天！

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

在子路由中添加language

{
    path: '/product',
    name: 'LandingHome',
    component: () => import(/* webpackChunkName: "LandingHome" */ '../views/landings/Base.vue'),
    props:true,
    children: [
      {
        path: ':language',
        name: 'LandingHome',
        component: () => import(/* webpackChunkName: "LandingHome" */ '../views/landings/Home.vue'),
      },
      {
        path: ':language/customers',
        name: 'LandingCustomers',
        component: () => import(/* webpackChunkName: "LandingCustomers" */ '../views/landings/Customers.vue'),
      },
    ]
  },

【讨论】：

这不是一个最佳解决方案，因为我需要使用父路由在其挂载中设置 i18n 语言环境。如果我将参数移动到子视图，我必须在每个子视图上复制这个逻辑。这就是我想使用父参数的原因。