Vue Component not rendering when clicking v-btn with route assigned - vue.js

Question

I am having trouble getting a component to load.
I have a Navbar with a Drawer with routes to each main page of my web app.
So far I have been able to make a page titled "Weapons.vue" which shows a list of weapon Categories in a video game ( such as Sniper Rifles and Handguns ). I use the "data()" to pass in names, images, and routes. Clicking on one of these weapons category v-btn brings me to a page which displays weapons within a category. In this question, I will be talking about "Assault-rifles.vue".
The issue I am having is that I am able to get to the Assault-Rifles.vue page whenever I click the v-tn with the assigned routes, but when I try to do the same thing within the Assault-rifles.vue page , by using v-btn and specified routes to get to a specific weapon , will bring me to an empty component. The path I specified shows in the URL, but it isn't displaying my "ADAR.vue" component ( ADAR is a type of weapon in the game ).
Here is my App.vue
<template>
<v-app>
<Navbar />
<v-content class="mt-5--grey mx-5--grey black">
<router-view></router-view>
</v-content>
</v-app>
</template>
<script>
import Navbar from "#/components/Navbar";
export default {
name: "App",
components: { Navbar },
data: () => ({
//
})
};
</script>
Here is my Weapons.vue (where the user should start). Didn't add all the data in the data() to save space.
<template>
<div class="mx-5 mb-5">
<h1 class="green--text ma-5">Weapons</h1>
<v-container class="my-5">
<v-layout row wrap>
<v-flex xs12 s6 m4 lg3 v-for="weapon in WeaponCat" :key="weapon.weapontype">
<v-card class="text-md-center ma-3 grey darken-4">
<v-responsive class="pt-4">
<v-img contain :src="weapon.images"></v-img>
</v-responsive>
<v-card-title class="justify-center">
<div class="heading font-weight-black white--text">{{ weapon.WeaponType}}</div>
</v-card-title>
<v-card-actions class="justify-center">
<v-btn flat class="green black--text ma-3" :to="weapon.route">View Weapons</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
<script>
export default {
data() {
return {
WeaponCat: [
{
WeaponType: "Assault Rifles",
images: "/WeaponCatimages/AR.png",
route: "/weapons/Assault-Rifles"
},
.....
]
};
}
};
</script>
Here is my Assault Rifles Category pages ( Assault-Rifles.vue ). Again removed some data to save space.
<template>
<div class="mx-4 Armor">
<h1 class="green--text ma-5">Assault Rifles</h1>
<v-container class="my-5">
<v-layout row wrap>
<v-flex xs12 s6 m4 lg3 v-for="weapon in Weapon" :key="weapon.weapon">
<v-card class="text-md-center ma-3 grey darken-4">
<v-responsive class="pt-4">
<v-img contain :src="weapon.images"></v-img>
</v-responsive>
<v-card-title class="justify-center">
<div class="heading font-weight-black white--text">{{ weapon.Weapon}}</div>
</v-card-title>
<v-card-actions class="justify-center">
<v-btn flat class="green black--text ma-3" :to="weapon.route">View Stats</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
<script>
export default {
data() {
return {
Weapon: [
{
Weapon: "ADAR",
images: "/WeaponIMG/AR/ADAR_2-15.png",
route: "/weapons/Assault-Rifles/ADAR"
},
....
]
};
}
};
</script>
Here is my "ADAR.vue" component ( the one that wont render ).
<template>
<div class="mx-4 ADAR">
<h1 class="white--text">ADAR</h1>
</div>
</template>
<script>
export default {};
</script>
Here is my route.js . It is super long so i removed some things...
import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import Weapons from "./views/Weapons.vue";
import AssaultRifles from "./views/AssaultRifles.vue";
import ADAR from "./views/ADAR.vue";
Vue.use(Router);
export default new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/",
name: "home",
component: Home
},
{
path: "/armor",
name: "armor",
component: Armor
},
{
path: "/weapons",
name: "weapons",
component: Weapons
},
{
path: "/weapons/Assault-Rifles",
name: "Assault Rifles",
component: AssaultRifles
},
{
path: "/Weapons/Assault-Rilfes/ADAR",
name: "ADAR",
component: ADAR
},
]
});
I have tried and tried multiple things such as changing if "/" appears and capitalization and I just cant seem to find the answer anywhere. I would love some help on this please.

Answer 1

Your route path says /Weapons/Assault-Rilfes/ADAR, note the misspell Rilfes.
Also you might want to use lowercase for the whole URL, it looks neater imo.