Vue Router携带元数据路由时自定义meta不生效问题求助

问题原因 #

当使用path调用router.push跳转时，你传入的meta不会覆盖路由配置中定义的meta。这是Vue Router的预期行为——通过path跳转时，路由元数据只会读取路由配置里的内容，忽略跳转时传入的meta字段。

解决方案 #

方案1：使用路由name配合params跳转

这是Vue Router官方推荐的、能正确传递meta的方式，同时适配带动态参数的路由：

router.push({
    name: 'columnDetail',
    params: { id: specialColumnId },
    meta: {
      specialColumnName: 'test',
      hello: 'world',
    },
});

此时在specialColumnDetailPage组件中，通过router.currentRoute.value.meta就能获取到跳转时传入的specialColumnName: 'test'。

方案2：通过query参数传递（适合允许暴露在URL的场景）

如果必须用path跳转，可以把需要传递的数据放在query中：

router.push({
    path: `column/${specialColumnId}`,
    query: {
      specialColumnName: 'test',
      hello: 'world',
    },
});

组件内获取方式：

import { useRoute } from 'vue-router';
const route = useRoute();
const specialColumnName = route.query.specialColumnName; // 'test'

方案3：通过state传递（适合敏感/不想暴露的参数）

借助浏览器history的state传递数据，不会显示在URL中：

router.push({
    path: `column/${specialColumnId}`,
    state: {
      specialColumnName: 'test',
      hello: 'world',
    },
});

组件内获取方式：

import { useRoute } from 'vue-router';
const route = useRoute();
const specialColumnName = route.state.specialColumnName; // 'test'

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