Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

157
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!