How to Suppress Fetch Occurring in Parent View (Vue.js) - vue.js

Question

I have a View.js application that includes two views - Articles.vue and Article.vue - such that Article.vue is nested within Articles. Here is how these views behave:
When the Articles created() lifecycle event fires, this view fetches a list of accounts via HTTP and renders links to Article.vue within a v-for loop.
A user can then click on an Article in the Articles view. This links to the child Articles.vue, which then shows details of the Article.
The issue that I am having is that when step 2 occurs, the Articles view recreates (i.e. the created() event re-fires, and the Articles list is unnecessarily re-retrieved.) This causes an unwanted delay and screen flash that makes the app feel less responsive.
What I would like is for the Articles view to render only once, and not each time an Article is clicked on. How might I accomplish this?
I do get the desired behavior if I include the Articles component directly in the home page, instead of linking to it as a view from the home page. However, since the Articles view is only intended to appear when the user selects this functionality, this direct inclusion is not a viable approach.
Also, I have come upon keep-alive, which I see will prevent the parent route from re-rendering. However, keep-alive is be too broad, as I do want the parent view to reload if the parent vue link is clicked again (i.e. to retrieve new Articles); I just don't want the view to reload if the child vue link is clicked.
Possibly, the answer lies in Navigation Guards:
https://router.vuejs.org/guide/advanced/navigation-guards.html
However, I am new to Vue and am not able to parse documentation on this feature to arrive at my solution.
Following is the relevant code:
Articles
<template>
<div class="hello">
<br />
<div v-for="Article in Articles" :key="Article.ArticleID">
<router-link :to="{name: 'Article', params: {'ArticleID': Article.ArticleID}}">{{Article.ArticleName}}</router-link>
</div>
<br />
<router-view :key="$route.path"></router-view>
</div>
</template>
<script>
export default {
name: "Articles",
data() {
return {
Articles: []
}
},
mounted() {
this.getArticles();
},
methods: {
getArticles: function() {
console.log("Getting data");
const url = "http://localhost:8001/articles"
fetch(url)
.then( (response) => {
console.log("Converting data to json");
return response.json();
})
.then( (data) => {
if (typeof(data[0].ArticleID)=="undefined") {
console.log("No data found.");
} else
{
console.log("Data found");
this.Articles = data;
}
})
.catch( err => console.log("Error retrieving data: " + err));
}
}
}
</script>
Routes Section
{
path: "/articles",
name: "Articles",
component: () =>
import(/* webpackChunkName: "y" */ "../views/Articles.vue"),
children: [
{
path: "/article/:ArticleID",
name: "Article",
props: true,
component: () =>
import(/* webpackChunkName: "z" */ "../components/Article.vue")
}
]
}