vue-router 动态设置meta

Question

各位大佬，有没有什么办法可以动态设置meta？

{
  path: 'product',
  component: () => import('@/views/product'),
  meta: {
    breadcrumb: '添加产品'
  }
},

我的面包屑是一个组件，根据路由里面的meta生成

编辑和添加是同一个页面，但是我想在面包屑动态设置breadcrumb，当this.$router.query.id有值时，显示编辑产品，否则添加产品

Answer 1

可以换个思路，改下路由配置，新增和编辑用同一个组件，你可以配置两个路由

Answer 2

跟路由的 meta 无关，正确的方式应该是：

<template>
  <breadcrumb>{{ this.$router.query.id ? '编辑产品' : '添加产品’ }}</breadcrumb>
</template>

Answer 3

遇到相同问题，请问怎么解决的？