[vuejs] (4) vue router를 사용하여 vue 페이지 이동

1. vue router 설치

vscode로 프로젝트 폴더를 열고 터미널창을 실행하여 vue router를 설치해준다.
이 때 폴더 경로는 frontend(vue 프로젝트가 설치된 폴더명)

npm install vue-router

2. vue router 설정

1) login.vue

로그인 후 main으로 이동되도록 하기 위해서 login.vue 안에 구현한다.

<script setup lang="ts">
  import { useRouter } from 'vue-router';
  router.push({path: '/main'})
</script>

• router.push 안에 path 또는 name으로 설정해도 된다. name은 밑에 나오는 router.ts에서 설정할 수 있다.

router.push({path: '/main'})
// 또는 
router.push({ name: 'main' })

2) router.ts

새로운 파일 router.ts를 생성하여 vue router를 설정해준다.

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
    {
        path: "/login",
        name: "login",
        component: () => import('./components/login.vue'), //login.vue의 파일 위치
    }, //로그인 창
    {
        path: "/main",
        name: "main",
        component: () => import('./components/main.vue'),
    }, //메인 창

]