102. router | 페이지 컴포넌트 생성 및 연결

1. views 폴더생성, routes에 넣을 component 생성

---

routes / index.js

import Vue from 'vue';

// 뷰 라우터 연결
import VueRouter from 'vue-router';

// 1. 뷰 라우팅 할 컴포넌트 연결
import LoginPage from '@/views/LoginPage.vue';
import SignupPage from '@/views/SignupPage.vue';

// Vue.use - 플러그인을 실행하기 위해 필요한 코드
// 뷰 라우터가 모든 컴포넌트에 적용되게 플러그인 연결
Vue.use(VueRouter);

// VueRouter를 이용해서 인스턴스 만들고
// 인스턴스를 default로 꺼내면
// VueRouter 인스턴스가 파일에서 밖으로 나가게됨. 이게 export 역할
// default는 하나의 변수나 파일이 나가게 하는것
export default new VueRouter({
  // routes - 이 속성은 뷰 라우터에 의해서 제어되는 페이지 정보(라우팅 정보) 를 담는 배열
  routes: [
    {
      path: '/login', // 2. URL
      component: LoginPage, // 3. 이동할 컴포넌트명
    },
    {
      path: '/signup',
      component: SignupPage,
    },
  ],
});

2. routes 배열 안에 path와 component 입력

- 1. 라우팅 할 컴포넌트 import

- 2. path에 URL 입력

- 3. component에 import 받아온 컴포넌트명 넣기