Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

162
Vistas
Vue3 router is not routing to the component

First time using vue3. I try to route a button from my home page to login page. I setup everything according to tutorial, official documentation however it is not working.

Can anyone tells me which part I got wrong?

This is main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

createApp(App).use(router).mount('#app')

This is index.js from router

import { createRouter, createWebHashHistory } from 'vue-router'
import Login from '../components/User/Login';
import Landing from '../components/Landing';

const routes = [
    {
        path: '/',
        name: 'Landing',
        component: Landing
    },
    {
        path: '/login',
        name: 'Login',
        component: Login
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes,
})

export default router

This is App.vue

<template>
  <Landing></Landing>
</template>

<script>
import Landing from "@/components/Landing";

export default {
  name: 'App',
  components: {
    Landing
  }
}
</script>

This is Landing.vue

<template>
  <div class="bg"></div>
  <div class="bg-text">
    <h1>Let's Start! :)</h1>
    <button class="signup-button">Join Us!</button>
    <button class="login-button" @click="login">Part of the Community?</button>
  </div>
</template>

<script>

export default {
  name: "Landing",
  methods: {
    login(){
      console.log(`Router: ${this.$router}`)
      this.$router.push({ path: 'login' })
    }
  }
}
</script>

<style scoped>
  @import "../assets/css/landing.css";
</style>

This is Login.vue except the long template

<script>
console.log("Reaching Login!")
export default {
  name: "Login"
}
</script>

<style scoped>
  @import "../../assets/css/login.css";
</style>

I follow the programmatic way of router in official documentation. So I do not have the router-link in the components.

I expects when I click the button in Landing page, it will route to Login page.

However it is not. From console I can see the router is existed with [Object].

Can I know which part of this that I got wrong?

Thank you!

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda