Vue嵌套路由跳转命名子路由时如何同步向父路由传递params参数

1. 先修复路由配置的重名问题 #

你当前的父级路由和默认子路由都使用了LandingHome作为路由名称，会导致路由匹配逻辑异常，是参数无法同步到父路由的核心原因，先修改父路由的唯一命名：

{
  path: '/product/:language',
  // 父路由修改为唯一名称，避免和子路由重名冲突
  name: 'LandingHomeLayout',
  component: () => import(/* webpackChunkName: "LandingHome" */ '../views/landings/Base.vue'),
  props:true,
  children: [
    {
      path: '',
      name: 'LandingHome',
      component: () => import(/* webpackChunkName: "LandingHome" */ '../views/landings/Home.vue'),
      // 子路由需要接收language参数也可以开启props
      props: true
    },
    {
      path: 'customers',
      name: 'LandingCustomers',
      component: () => import(/* webpackChunkName: "LandingCustomers" */ '../views/landings/Customers.vue'),
      props: true
    },
  ]
},

2. 直接使用原有跳转逻辑即可 #

修改路由命名后，你原来的跳转代码不需要做任何调整：

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

父路由组件可以通过两种方式获取language参数：

• 通过props直接接收（你已经在父路由配置了props: true，直接在父组件声明对应props即可）

  // Base.vue 组件配置
  export default {
    props: ['language'],
    // 业务逻辑直接调用this.language即可
  }
  

• 直接从全局路由实例获取，所有层级的路由组件都可以访问完整的params集合

  this.$route.params.language
  

原理说明 #

Vue Router的路由参数是跨整个匹配的路由链共享的，只要动态参数名和父路由路径定义的动态段匹配，跳转子路由时传入的params会自动同步到所有上层路由，无需额外配置。

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