Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

164
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda