UPDATED -

Starting fresh is the way to go.

I've got a VUE js CLI app that fetches data from the DB in the APP.vue page and then distributes it across other pages and the navigation bar.

The nav bar triggers a function in the router:

loadRouter(articles){
          this.$router.push({name: 'Articles', params: {articles: articles}})
      }

But now two issues have arisen:

1. The component doesn't refresh with new data when a new nav item is clicked

2. An error message shows up:

   Error: Avoided redundant navigation to current location: "/articles".

https://i.sstatic.net/jSs0O.png

The CODE:

app.vue <<<< Here, the fetch call is made and then the fetched data is passed to the NAV bar component (visible in

<Navbar :articleData="articleData"/>

)

<template>
  <div id="app">
    <div class="topElements">
      <Navbar :articleData="articleData"/>
      
      <router-view/>
    </div>
      <Footer />
  </div>
</template>

<script>
import Navbar from '@/components/Nav.vue'

import Footer from '@/components/Footer.vue'
export default {
  components: {
    Navbar,
    Footer
  },
  data(){
    return {
      articleData: null,


      //   setting up a variable for the local host as it will change later when moving online
      enviroment: 'http://localhost:1337/',
    }
  },
  created(){
    fetch(`${this.enviroment}languages`)
    .then(responce => responce.json())
    .then(data => {this.articleData = data})
  }
}
</script>

Navbar.vue << This is where the user selects the language (article) - this is done via a @click event which calls the callback that uses $route.push to navigate to the Article component along with props

template>
  <div class="navigationContainer">
      <div class="languageContainer" v-for="item in articleData" :key="item.id">
          <h2 @click="loadRouter(item.articles)">{{ item.title }}</h2>
      </div>
  </div>
</template>

<script>
export default {
  name: 'Navbar',
  props: ['articleData'],
  data(){
      return{

      }
  },
  methods: {
      loadRouter(articles){
          this.$router.push({name: 'Articles', params: {articles: articles}})
      }
  } 
}
</script>

Articles.vue << Finally, the articles page shows all the articles by receiving them as a prop (initial props load but don't reload when a new nav item is clicked, resulting in the aforementioned error)

Articles.vue

<template>
  <div class="articleContainer">
     <p>{{ articles }}</p>  <<< Just to confirm if the props are received correctly - will be updated later
  </div>
</template>

<script>
export default {
    name: 'Articles',
    props: ['articles'],
    data(){
      return{
        articleData: null,
      }
    },
    watch: {
      articles(){
        this.articleData = this.articles; <<<< Attempting to update the component upon detecting a new $route - Also tried using $route
        console.log(articleData) <<< Checking if it worked.... 
      }
    }
}
</script>

This was quite extensive, so I really appreciate any help offered here.

Sincerely, Wally

p.s.

Feel free to ask any questions you may have

UPDATED:

Article data sourced from: http://localhost:1337/languages

It's an array of objects fetched from the STRAPI API (I've made it public)

[
{
"id": 1,
"title": "JS",
"created_at": "2020-07-10T08:30:33.156Z",
"updated_at": "2020-07-10T08:30:33.156Z",
"articles": [
{
"id": 4,
"title": "hamburger menu",
"description": "This is where I would explain how to make a front-end hamburger menu style for the navigation of a web page",
"created_at": "2020-07-10T08:32:11.474Z",
"updated_at": "2020-07-10T08:32:11.474Z"
}
]
},
{
"id": 2,
"title": "HTML",
"created_at": "2020-07-10T08:30:38.437Z",
"updated_at": "2020-07-10T08:30:38.437Z",
"articles": [
{
"id": 4,
"title": "hamburger menu",
"description": "This is where I would explain how to make a front end hamburger menu style for the navigation of a web page",
"created_at": "2020-07-10T08:32:11.474Z",
"updated_at": "2020-07-10T08:32:11.474Z"
},
{
"id": 5,
"title": "WEB STRUCTURE",
"description": null,
"created_at": "2020-07-10T10:08:44.221Z",
"updated_at": "2020-07-10T10:08:44.221Z"
}
]
},
{
"id": 3,
"title": "CSS",
"created_at": "2020-07-10T08:30:43.107Z",
"updated_at": "2020-07-10T08:30:43.107Z",
"articles": [
{
"id": 4,
"title": "hamburger menu",
"description": "This is where I would explain how to make a front end hamburger menu style for the navigation of a web page",
"created_at": "2020-07-10T08:32:11.474Z",
"updated_at": "2020-07-10T08:32:11.474Z"
}
]
},
{
"id": 4,
"title": "VUE",
"created_at": "2020-07-10T10:52:11.390Z",
"updated_at": "2020-07-10T10:52:11.390Z",
"articles": []
},
{
"id": 5,
"title": "NODE JS",
"created_at": "2020-07-10T10:52:23.351Z",
"updated_at": "2020-07-10T10:52:23.351Z",
"articles": []
},
{
"id": 6,
"title": "SASS",
"created_at": "2020-07-10T10:52:31.450Z",
"updated_at": "2020-07-10T10:52:31.450Z",
"articles": []
},
{
"id": 7,
"title": "PHP",
"created_at": "2020-07-12T19:21:48.620Z",
"updated_at": "2020-07-12T19:21:48.620Z",
"articles": []
},
{
"id": 8,
"title": "GIT",
"created_at": "2020-07-12T19:22:02.208Z",
"updated_at": "2020-07-12T19:22:02.208Z",
"articles": []
}
]