반응형
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 받아온 컴포넌트명 넣기
반응형
'vue.js > vue.js 2' 카테고리의 다른 글
104. router | 코드 스플리팅 소개 및 적용 (0) | 2022.10.09 |
---|---|
103. router | 라우팅 동작 확인 (0) | 2022.10.09 |
101. router | 뷰 라우터 설치 및 연결 (0) | 2022.10.09 |
100. 애플리케이션 코딩 컨벤션 및 스타일 가이드 (0) | 2022.10.09 |
99. jsconfig.json | 파일을 절대 경로로 찾기 설정 (0) | 2022.10.04 |