VueRouter中router-link标签传递meta属性不生效该如何解决

问题根因 #

Vue Router 3.x 的设计逻辑中，<router-link> 的 to 属性传入的 meta 字段不会被自动合并到目标路由的 $route.meta 对象中，路由的 meta 默认仅读取 routes 配置表中的预定义值，因此你当前的写法无法生效。

可行解决方案 #

可以通过动态参数传递自定义内容，再手动合并到路由 meta 中实现需求，操作步骤如下：

1. 首先给路由配置添加 name 属性（避免用 path 传 params 被自动忽略的问题）：

const routes = [{
    path: "/inlineMeta",
    name: "inlineMeta", // 新增name字段
    component: cComponent,
  },
  // 其余路由配置保持不变
]

2. 修改 <router-link> 的传参方式，把动态meta放到params中：

<router-link :to="{name: 'inlineMeta', params: { dynamicMeta: {title: 'Inline meta'} }}">
    Inline meta
</router-link>

3. 在全局前置守卫中手动合并动态meta到路由meta：

router.beforeEach((to, from, next) => {
  // 存在动态传入的meta时，合并到当前路由的meta对象
  if (to.params?.dynamicMeta) {
    to.meta = Object.assign({}, to.meta, to.params.dynamicMeta)
    // 可选：删除params中的dynamicMeta，避免在组件中暴露该参数
    delete to.params.dynamicMeta
  }
  console.log("The meta title is : " + to.meta.title);
  next()
})

其他替代方案 #

如果不想修改路由守卫，也可以直接在目标组件中读取$route.params.dynamicMeta直接使用，不需要强制挂载到meta字段上。

内容的提问来源于stack exchange，提问作者Huy Phạm