Vue URL's not working when navigating directly to a page - vue.js

Question

I have a series of products, and I'm trying to set my app up in a way that let's me send someone a link directly to a product.
Everything works fine when you try to navigate to a product directly, but if you open that same url directly (without navigating there through the app), it doesn't work.
The issue is coming from subcategoryItems being undefined in the single item view
Router snippet:
{
path: '/categories',
name: 'categories',
components: { default: Categories, header: StarterNavbar, footer: StarterFooter },
props: {
header: { colorOnScroll: 400 },
footer: { backgroundColor: 'black' }
}
},
{
path: '/categories/:catname',
name: 'products',
components: { default: Products, header: StarterNavbar, footer: StarterFooter },
props: {
header: { colorOnScroll: 400 },
footer: { backgroundColor: 'black' }
}
},
{
path: '/categories/:catname/:productname',
name: 'singleproduct',
components: { default: SingleProduct, header: StarterNavbar, footer: StarterFooter },
props: {
header: { colorOnScroll: 400 },
footer: { backgroundColor: 'black' }
}
},
Product View
<template>
<div class="">
<section class="subcategory-container" v-for="(category, index) in subcats" v-bind:key="index">
<h2>{{category.subcategoryTitle}}</h2>
<card class="card-shell" v-for="(product, index) in category.subcategoryItems" v-bind:key="index">
<div class="image-container">
<img slot="image" class="card-img-top" :src="product.image" alt="Card image cap">
</div>
<div>
<h4 class="card-title">{{product.title}}</h4>
<p class="card-text">{{product.sku}}</p>
<div>
<router-link :to="{ name: 'singleproduct', params: { productname: product.title, subcatTitle: category.subcategoryTitle } }" class="text-white">
<n-button type="primary">{{buttonText}}</n-button>
</router-link>
</div>
</div>
</card>
</section>
</div>
</template>
<script>
import { Card, Button, Modal } from '#/components';
import axios from 'axios'
export default {
name: 'products',
components: {
Card,
Modal,
[Button.name]: Button
},
async created() {
const url = this.$route.params.catname;
try {
const res = await axios.get(`/products/${url}.json`);
this.subcats = res.data;
this.catname = url;
} catch (e) {
console.log(e);
}
},
data() {
return {
subcats: [],
modals: {
classic: false
},
showModal(product) {
this.modals.classic = true;
this.selectedItem = product;
},
buttonText: "Product Info",
selectedItem: '',
catname: ''
}
}
};
single item view:
<template>
<card class="card-nav-tabs text-center" header-classes="card-header-warning">
<div slot="header" class="mt-2">
<img src="" alt="">
</div>
<h4 class="card-title">{{product.title}}</h4>
<p class="card-text">{{product.description}}</p>
<div slot="footer" class="card-footer text-muted mb-2">
{{product.sku}}
</div>
</card>
</template>
<script>
import { Card, Button } from '#/components';
import axios from 'axios';
import { async } from 'q';
export default {
name: 'singleproduct',
components: {
Card,
[Button.name]: Button
},
async created() {
const { catname, productname, subcatTitle } = this.$route.params;
//console.log(this.$route.params)
try {
const res = await axios.get(`/products/${catname}.json`);
const data = res.data;
const items = data.find(product => product.subcategoryTitle === subcatTitle).subcategoryItems;
const item = items.find(item => item.title === productname);
console.log(item);
this.product = item;
} catch (e) {
console.log(e);
}
},
data () {
return {
product: []
}
}
}
</script>
Json sample:
[
{
"subcategoryTitle": "sub cat title 1",
"subcategoryItems": [
{
"id": 1,
"title": "name 1",
"sku": "sku 1",
"image": "img/path to image",
"description": "Cream beans medium rich breve cinnamon latte. White pumpkin spice kopi-luwak sugar foam frappuccino dark. Brewed arabica, dripper arabica as milk turkish medium."
}
]
},
{
"subcategoryTitle": "sub cat title 2",
"subcategoryItems": [
{
"id": 1,
"title": "name 2",
"sku": "sku 2",
"image": "img/path to image"
"description": "Cream beans medium rich breve cinnamon latte. White pumpkin spice kopi-luwak sugar foam frappuccino dark. Brewed arabica, dripper arabica as milk turkish medium."
},
{
"id": 2,
"title": "name 2",
"sku": "sku 2",
"image": "img/path to image",
"description": "Cream beans medium rich breve cinnamon latte. White pumpkin spice kopi-luwak sugar foam frappuccino dark. Brewed arabica, dripper arabica as milk turkish medium."
}
]
}
]
Thank you

Answer 1

This requires history mode enabled in the router. The router documentation has an explanation and example for this:
https://router.vuejs.org/guide/essentials/history-mode.html

Answer 2

If you look at the code I posted, the issue was that I was missing a slug in the URL for the final product page.
When I navigated there through the app, the product info was all there, but on reload, it didn't match the route anymore, so the details vanished.