Vuetify routing: changing page content conundrum - vue.js

Question

I desire to see the content of uwc.vue upon clicking the "Let's GO" button (which is in App.vue).
But, the url changes & the content's of the screen still remain the same.
I am new to vue, I asked this question to the Vuetify community but it was ignored.
Thank you in advance.
router.js:
import Vue from 'vue';
import Router from 'vue-router';
import uwc from '../views/uwc';
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [
{ path: '/', name: 'uwc', component: uwc},
]
});
App.vue
<template>
<v-app>
<v-container fluid>
<v-col class="d-flex mx-auto" >
<!-- UWC Card -->
<v-card class="mx-auto my-15" max-width="400" >
<v-img height="400px" class="image-fit" src="./img/UWC-logo.webp" ></v-img>
<v-divider class="mx-4"></v-divider>
<v-card-title>
<p class="text-break">
University of the Western Cape
</p>
</v-card-title>
<v-card-actions>
<router-link to="/views/uwc">
Let's GO
</router-link>
</v-card-actions>
</v-card>
</v-col>
</v-container>
</v-app>
</template>
<script>
export default {
name: 'app',
}
</script>
uwc.vue (the file I want to display on clicking the "Let's GO" button):
<template>
<v-app id="inspire">
<router-view></router-view>
<v-container fluid>
<v-row>
<template v-for="n in 4">
<v-col :key="n" class="mt-2" cols="12">
<strong> Category {{ n }} </strong>
</v-col>
<v-col v-for="j in 6" :key="`${n}${j}`" cols="6" md="2">
<v-sheet height="150"></v-sheet>
</v-col>
</template>
</v-row>
</v-container>
</v-app>
</template>

Answer 1

First of all, this isn't a 'Vuetify' question. Its a general routing question for VueJS.
Your primary problem is that you do not have a <router-view/> in your App.vue file. This is what renders the paths in your router.
App.vue
<template>
<div>
<router-view/>
</div>
</template>
Now if you visit the '/' path, you will see the contents of your uwc.vue file.
I also wanted to point out another error.
Your <router-link></router-link> tags refer to the path in your router file, not the path to the file is located in your folder structure.
You have:
<router-link to="views/uwc">
Should be:
<router-link to="/">
If you are continuing to struggle, create a brand new app using the [Vue CLI][1].
Then add the router using vue add router. It will give you a pretty solid example to work off of on your app.
[1]: https://cli.vuejs.org/guide/creating-a-project.html#vue-create