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

Question

When I navigate to my dynamic components trough navigation bar, vue-meta title, content, and schema are displayed correctly, but when I refresh the page or click on the external link I get a value of undefined.

i have stored title content and schema in the json file.

 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

You should store the router parameters in the router itself or in the URL, not the link. What you do is passing objects internally when you click the link, but as you noticed, when you click the browser refresh button these params are gone.

What happens is that Vue will load the app and router, identify what components are responsible for rendering the route and pass the detected parameters from your router to the components. Hence losing any additional data you had in your link before.

Try to keep only the dynamic params in your router and load the rest in the component, based on app logic. I.e. Assuming your route looks like /details/:id, you should initialize the SEO params in your details component.

Typically these come from the backend and for faster access I would transform the array to literal object and access the record by key. I.e. transform the array from:

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

to

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

and then store it in 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,
        }
    }