[Vue.js 3] 버튼 클릭하여 페이지 이동하기(Router)

로그인 버튼을 클릭하면 휘리릭 처리되서 화면이 이동되게 만들고 싶었다.

 

 

vue.js 2에서는 그냥 src/router/index.js 잘 작성해두고 Login.vue에서

this.$router.push('/home'); //login에서 home으로 이동

이 한 줄이면 됐는데 안 된다.

왜 ... ?

 

3시간동안 삽질한 결과

 

Login.vue에서 script에

import { useRouter } from 'vue-router';

하고

export default {
    name: 'Login',
    setup: () => {
        const router = useRouter();
        const userid = ref('');
        const userpw = ref('');

        const loginStrart = () => { // 버튼 클릭 시 실행
            router.push({ path: '/home' });
            console.log('Login complete');
            // this.$router.push('/home'); // 이거 안 됨.
        };

        return {
            router,
            userid,
            userpw,
            loginStrart
        };
    }
};

이렇게 수정하니 된다.

성공하여 페이지 넘어감

 

하....까다로운 친구네......

 

 

22/11/30 추가

버튼 클릭 시 페이지 이동만 하고 싶을 때

 

main.js에 아래 코드처럼 있다면 굳이 import가 필요없음.

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

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

 

버튼 클릭 시 router.push() 사용 가능

<template>
  <button @click="$router.push({name: 'login'})">Login Page</button>
  <button @click="$router.push({name: 'main'})">Main Page</button>
</template>