After clicking on a router-link to navigate to the register-form page, I noticed that the URL changed but the component did not load properly. https://i.sstatic.net/qkKBH.jpg
Initially, I suspected an issue with the navbar being within a component, but that was not the root cause of the problem...
Take a look at the code snippet responsible for defining the routes in the router file:
import {createRouter, createWebHashHistory} from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
},
{
path: '/formulario-registro',
name: 'RegisterForm',
component: () => import(/*webpackChunkName: "registerform"*/ '../views/RegisterForm.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router
Furthermore, let's examine the nav component where the router-links are located:
<div class="nav">
<div class="brand">
<router-link to="/">BookArt</router-link>
</div>
<div class="collapse">
<span id="mobile-icon" v-on:click="responsiveNavbar"></span>
</div>
<div class="links">
<ul id="nav-list-group">
<li class="list-item">
<router-link to="/"> Home</router-link>
</li>
<li class="list-item">
<router-link to="/formulario-registro"> Register</router-link>
</li>
<li class="list-item">
<router-link to=""> Login</router-link>
</li>
</ul>
</div>
Additionally, here is the main.js code for reference:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).mount('#app')
Moving on to the App.vue code:
<template>
<Nav></Nav>
<router-view/>
</template>
<script>
import Nav from '@/components/Nav.vue'
export default {
components: {
Nav
}
}
</script>
Last but not least, let's review the register-form component's code:
<template>
<form action="">
<div class="form-group">
<input type="text" name="form.username" id="form.username" class="username" placeholder="Username....">
</div>
<div class="form-group">
<input type="file" name="form.profile_pic" id="form.profile_pic" class="profile_pic"
placeholder="Profile Picture....">
</div>
<div class="form-group">
<input type="email" name="form.email" id="form.email" class="email" placeholder="Email....">
</div>
<div class="form-group">
<input type="password" name="form.password" id="form.password" class="password" placeholder="*******">
</div>
<div class="form-group">
<input type="password" name="form.confirm_password" id="form.confirm.password" class="confirm_password"
placeholder="*******">
</div>
<div class="form-group">
<button>Sign Up</button>
</div>
</form>
</template>
<script>
export default {
name: "RegisterForm",
mounted() {
console.log('Registration form loaded successfully');
}
}
</script>