vue-meta 在页面刷新或外部时不显示标题、内容或架构 link 单击动态组件

Question

当我通过导航栏导航到我的动态组件时，vue-meta 标题、内容和架构显示正确，但是当我刷新页面或单击外部 link 我得到一个未定义的值。

我已将标题内容和架构存储在 json 文件中。

 metaInfo() {
    return {
      title: `${this.seoTitle}`,
      meta: [
        {name: "robots", content: "index,follow"},
        {
          name: 'description',
          content: `${this.seoContent}`

        }

      ],
      link: [
        {rel: 'favicon', href: 'logo.ico'}
      ],
      script: [{
        type: 'application/ld+json',
        json: this.markups
      }]
    }
  },

data() {
    return {
      seoTitle: this.$route.params.title,
      seoContent: this.$route.params.content,
      markups:this.$route.params.markup,
}
}

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

Answer 1

您应该将路由器参数存储在路由器本身或 URL 中，而不是 link。当您单击 link 时，您所做的是在内部传递对象，但正如您所注意到的，当您单击浏览器刷新按钮时，这些参数消失了。

发生的事情是 Vue 将加载应用程序和路由器，确定哪些组件负责渲染路由，并将检测到的参数从路由器传递给组件。因此，您之前 link 中的任何其他数据都会丢失。

尝试仅在路由器中保留动态参数，并根据应用程序逻辑将其余参数加载到组件中。 IE。假设您的路线看起来像 /details/:id，您应该在详细信息组件中初始化 SEO 参数。

通常这些来自后端，为了更快地访问，我会将数组转换为文字对象并按键访问记录。 IE。转换数组：

[ 
    { "id": 1008; "title": "title1", "content": "....", ... }, 
    { "id": 1009, "title": "..."... } 
]

至

{
    "1008": { title: "title1", content: "....", ... },
    "1009": { .... }
}

然后存入VueX(https://vuex.vuejs.org/guide/getters.html)

getters: {
  // ...
  getBoatTour: (state) => (id) => {
    return state.boatTours[id] || { title: 'Not found', content: '......' }
  }
}

    data() {
        const SEOdata = store.getters.getBoatTour(this.$route.params.id); 
        return {
            seoTitle: SEOdata.title,
            seoContent: SEOdata.content,
            markups: SEOdata.markup,
        }
    }

vue-meta 在页面刷新或外部时不显示标题、内容或架构 link 单击动态组件

vue-meta doesnt display title, content, or schema on page refresh or external link click for dynamic components

vue.js

vuejs2

vue-meta