Passing Props between Page Components (Nuxt)

I am making a blog app using Nuxt (specifically using Nuxt Content) and I am trying to pass some data from one page component to another. Specifically, I’m trying to pass the object currentArticle (look at the code below) from this page component to another page component, in order to display a page for a single authour.

Upon doing my research, it seems that you can pass data via the nuxt-link. However, that will alter the page URL because it seems that you can only pass data using the params or query objects. I’ve also seen that it is possible to get around this using Vuex, but that is my last option

To summarise, I’m trying to pass data (in my case, an object) from one page component to another without affecting the page URL as a result. Is this possible?

Your response and suggestions are appreciated

Gilbert


/blogs/authours/index.vue

<template>
  <div>
    <h2>Meet The Authours</h2>
    <ul>
      <li v-for="currentArticle in authourArticles" v-bind:key="currentArticle.slug">
        <NuxtLink v-bind:to="`/blogs/authours/${currentArticle.authour.name}`">
          <img v-bind:src="require(`~/assets/img/${currentArticle.authour.img}`)" v-bind:alt="currentArticle.authour.bio">
          <div>
            <h2>{{ currentArticle.authour.name }}</h2>
            <p>{{ truncateBio(currentArticle.authour.bio) }}</p>
          </div>
        </NuxtLink>

        <ul>
          <li v-for="(currentPost, index) in fetchArticleByAuthour(articles, currentArticle.authour.name)" v-bind:key="index">
            <NuxtLink v-bind:to="`/blogs/${currentPost.slug}`">{{ currentPost.slug.split("-").join(" ") }}</NuxtLink>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>