如何动态修改vue中meta

可以使用Vue Router提供的导航守卫来动态修改Vue中的meta。具体步骤如下：

1. 在Vue Router的路由配置中，为需要动态修改meta的路由定义一个meta字段，如下所示：

const routes = [
  {
    path: '/article/:id',
    component: ArticleDetail,
    meta: {
      title: 'Article Detail',
      metaTags: [
        {
          name: 'description',
          content: 'This is the article detail page'
        }
      ]
    }
  }
]

2. 在Vue组件的created生命周期中，通过this.$route.meta来获取路由定义的meta字段，并将其动态设置到页面中的meta标签上，如下所示：

export default {
  created() {
    const metaTags = this.$route.meta.metaTags;
    if (metaTags) {
      metaTags.forEach(tag => {
        const metaTag = document.createElement('meta');
        Object.keys(tag).forEach(key => {
          metaTag.setAttribute(key, tag[key]);
        });
        document.head.appendChild(metaTag);
      });
    }
  }
}

这样就可以在页面渲染时动态修改meta了。需要注意的是，如果在组件销毁时不移除动态添加的meta标签，可能会导致页面中存在重复的meta标签，影响SEO。因此，在组件销毁时需要将动态添加的meta标签移除，可以在Vue组件的destroyed生命周期中编写代码实现。