title: Vue.js 3- Component doesn't load in VueJS with router
body: <p>When I click in a router-link to go to register-form page, the URL changes, but the component doesn´t load. <a href="https://i.stack.imgur.com/qkKBH.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qkKBH.jpg" alt="component register-form not displayed" /></a></p>
  <p>I have the navbar in a component, and I thought that it was wrong, but no...</p>
  <p>Here's the router's file code:</p>
  <pre><code>    import {createRouter, createWebHashHistory} from 'vue-router'
  
  const routes = [
      {
          path: '/',
          name: 'Home',
          component: () =&gt; import(/* webpackChunkName: &quot;home&quot; */ '../views/Home.vue')
      },
      {
          path: '/formulario-registro',
          name: 'RegisterForm',
          component: () =&gt; import(/*webpackChunkName: &quot;registerform&quot;*/ '../views/RegisterForm.vue')
      }
  
  ]
  
  const router = createRouter({
      history: createWebHashHistory(),
      routes
  });
  
  export default router
  </code></pre>
  <p>And here's my nav componet, where there are the router-link:</p>
  <pre><code>  &lt;div class=&quot;nav&quot;&gt;
  &lt;div class=&quot;brand&quot;&gt;
    &lt;router-link to=&quot;/&quot;&gt;BookArt&lt;/router-link&gt;
  &lt;/div&gt;
  &lt;div class=&quot;collapse&quot;&gt;
    &lt;span id=&quot;mobile-icon&quot; v-on:click=&quot;responsiveNavbar&quot;&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class=&quot;links&quot;&gt;
    &lt;ul id=&quot;nav-list-group&quot;&gt;
      &lt;li class=&quot;list-item&quot;&gt;
        &lt;router-link to=&quot;/&quot;&gt; Inicio&lt;/router-link&gt;
      &lt;/li&gt;
      &lt;li class=&quot;list-item&quot;&gt;
        &lt;router-link to=&quot;/formulario-registro&quot;&gt; Registro&lt;/router-link&gt;
      &lt;/li&gt;
      &lt;li class=&quot;list-item&quot;&gt;
        &lt;router-link to=&quot;&quot;&gt; Login&lt;/router-link&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
    
  <p>My main.js code:</p>
  <pre><code>    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')
  </code></pre>
  <p>And my App.vue code:</p>
  <pre><code> &lt;template&gt;
    &lt;Nav&gt;&lt;/Nav&gt;
    &lt;router-view/&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  import Nav from '@/components/Nav.vue'
  
  export default {
    components: {
      Nav
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>Here's my register-form component's code:</p>
  <pre><code>   &lt;template&gt;
    &lt;form action=&quot;&quot;&gt;
      &lt;div class=&quot;form-group&quot;&gt;
        &lt;input type=&quot;text&quot; name=&quot;form.username&quot; id=&quot;form.username&quot; class=&quot;username&quot; placeholder=&quot;Nombre de usuario....&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-group&quot;&gt;
        &lt;input type=&quot;file&quot; name=&quot;form.profile_pic&quot; id=&quot;form.profile_pic&quot; class=&quot;profile_pic&quot;
               placeholder=&quot;Foto de perfil....&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-group&quot;&gt;
        &lt;input type=&quot;email&quot; name=&quot;form.email&quot; id=&quot;form.email&quot; class=&quot;email&quot; placeholder=&quot;Email....&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-group&quot;&gt;
        &lt;input type=&quot;password&quot; name=&quot;form.password&quot; id=&quot;form.password&quot; class=&quot;password&quot; placeholder=&quot;*******&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-group&quot;&gt;
        &lt;input type=&quot;password&quot; name=&quot;form.confirm_password&quot; id=&quot;form.confirm.password&quot; class=&quot;confirm_password&quot;
               placeholder=&quot;*******&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-group&quot;&gt;
        &lt;button&gt;Registrarse&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: &quot;Register-form&quot;,
  
    mounted() {
      console.log('Its ok');
    }
  
  }
  &lt;/script&gt;
  </code></pre>