vue-meta页面刷新或点击外部链接时动态组件meta内容显示undefined问题

问题根因 #

你通过<router-link>跳转时传递的title、content、markup属于路由内存参数，没有配置到URL路径中，只要刷新页面、直接输入地址、外部链接跳转进入页面时，这些内存参数就会丢失，所以取值为undefined。

修复方案 #

1. 调整路由配置，仅保留id作为URL路径参数（确保刷新时id不会丢失），示例路由配置参考：

// router/index.js 相关配置
{
  path: '/details/:id',
  name: 'details',
  component: () => import('你的详情页组件路径')
}

2. 简化列表页的<router-link>传参，只需要传id即可：

<div class="landing-group-tours box" v-for="tour in boatTours" :key="tour.id">
  <router-link :to="{name: 'details', params:{id: tour.id}}">
    <!-- 原有内容 -->
  </router-link>
</div>
<script>
import tours from '@/data/privateToursData.json'
export default{
  data(){
    return{
      boatTours: tours
    }
  }
}
</script>

3. 详情页直接引入同一份JSON数据，根据路由id匹配对应的SEO数据，无需从路由参数取相关值，修改后代码如下：

<script>
import tours from '@/data/privateToursData.json'
export default {
  metaInfo() {
    // 直接在metaInfo里匹配当前id对应的tour数据
    const currentTour = tours.find(item => item.id === this.$route.params.id) || {}
    return {
      title: currentTour.seoTitle || '',
      meta: [
        {name: "robots", content: "index,follow"},
        {
          name: 'description',
          content: currentTour.seoContent || ''
        }
      ],
      link: [
        {rel: 'favicon', href: 'logo.ico'}
      ],
      script: [{
        type: 'application/ld+json',
        json: currentTour.markup || {}
      }]
    }
  },
  // 原来data里定义的seo相关字段可以直接删除，无需保留
}
</script>

注意：如果你的tour.id是数字类型，路由params获取的id默认是字符串，匹配时要做类型转换，比如写成tours.find(item => item.id === parseInt(this.$route.params.id))避免匹配失败。

验证逻辑 #

• 导航跳转时：根据传入的id匹配JSON数据，正常读取SEO字段
• 刷新/外部链接进入时：URL里的id不会丢失，同样可以匹配JSON数据拿到对应SEO字段，不会出现undefined

内容的提问来源于stack exchange，提问作者Josip Marić