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!