Can't get the vue router to work properly - vue.js

Question

I have struggling to get the vue router to work properly, despite the fact that I have tried multiples different ways and read through the documentation, there seems to be something that I don't understand
I know app component is a bit messy, with router view covering router link and there is the component. its because I have tried it all, included the router-view first then it showed everything from my firstUser component, then tried the link, it worked, but it did not go to that page seperately,
I need to make it so that when clicked it should show the firstUser page only, Please help, much appreciated
//This is my app component
<template>
<div id="app">
<h1>Welcome</h1>
<router-view>
<router-link to="firstUser"> <first-user/> Register </router-link>
</router-view>
<div>
<h2>Returning user</h2>
<returning-user />
</div>
<div>
<h2>Registered User</h2>
<registered-user />
</div>
</div>
</template>
<script>
import firstUser from "#/components/firstUser.vue";
import returningUser from "#/components/returningUser.vue";
import registeredUser from "#/components/registeredUser.vue";
export default {
components: { returningUser, registeredUser, firstUser },
data() {
return {};
},
};
</script>
<style>
#app {
padding: 20px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
input:focus {
outline: none;
}
</style>
//this is my fisrtUser component
<template>
<div>
<form class="form" #submit.prevent="registerUser">
<h4 class="">Register</h4>
<my-input
v-model="this.firstName"
type="text"
class="input"
placeholder="First Name"
/>
<my-input
v-model="this.lastName"
type="text"
class="input"
placeholder="Last Name"
/>
<myButton #click="registerUser"> Create </myButton>
</form>
</div>
</template>
<script>
import myInput from "./UI/myInput.vue";
import myButton from "./UI/myButton.vue";
export default {
name: "firstUser",
components: { myInput, myButton },
data() {
return {
user: [
{
firstName: "",
lastName: "",
},
],
users: [],
};
},
methods: {
registerUser() {
const newUser = {
firstName: this.firstName,
lastName: this.lastName,
};
this.users.push(newUser);
console.log(newUser);
},
},
};
</script>
<style>
</style>
///then this is the index.js from router
import { createRouter, createWebHistory } from 'vue-router';
import firstUser from '#/views/firstUser';
const routes = [{
path: '/firstUser',
name: 'firstUser',
component: firstUser
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
and

Answer 1

It is not entirely clear what the firstUsers are. I will assume what you did is intentional and there are two firstUsers (one view and one component).
Specify the to prop of the router-link component as you would the href attribute of a link/anchor <a> element. That is, the route needs to begin with a slash.
<router-link to="/firstUser">
Alternatively, you might want to reduce the coupling by declaring the link by route name instead. This way, you can change the route to whatever you want without having to update your link. This can be done by using v-bind to tell Vue to parse the prop contents, and by using different syntax.
<router-link :to="{ name: 'firstUser' }">
See the Vue Router documentation.