0

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

我已将标题内容和架构存储在 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>
4

1 回答 1

0

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

发生的情况是 Vue 将加载应用程序和路由器，识别哪些组件负责渲染路由并将检测到的参数从路由器传递给组件。因此丢失了您之前在链接中拥有的任何其他数据。

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

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

[ 
    { "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,
        }
    }
于 2021-07-12T14:16:53.317 回答