GO CAN DO IT

뷰에서는 라우터를 통해 뷰 파일과 url 을 연결해주는 기능을 제공한다. 뷰 예제에서는 보통 App.vue에 직접 라우터 경로를 임포트 하고, 해당 라우터 객체를 뷰인스턴스의 변수로 사용했다. 아래의 코드처뤔. 하지만, 대형 프로젝트에서는 이렇게 하지 않고 index.js라는 파일을 통해 라우터를 한꺼번에 관리한다. $mkdir router $cd router $vi index.js 를 통해 router라는 디렉토리를 하나 만들고, index.js라는 파일을 생성해주었다. 프로젝트 구조는 다음과 같아졌다. - src - components - router - index.js - App.vue main.js에서 우선 설정을 해준다. // 1. main.js import Vue from 'vue' impor..

이제 실제로 내가 뷰 프로젝트를 개발해보도록 하겠다. 백쪽은 JPA로 구현할거라서 우선, 통신은 구현하지않고 화면이랑 공통 레이아웃을 기준으로 우선 프론트쪽을 구현해보겠다. 가장 먼저 할 것은 바로 vuetify 설치! vuetify를 사용하기 위해 먼저 터미널에서 작업하려는 폴더로 이동 후, vuetify 를 깔아준다. $cd vue-form $vue add vuetify 뷰티파이 공식 사이트는 api 설명이 친절하게 잘되어있어서 여기꺼 보고 거의 따라하는 식으로 구현했다. https://vuetifyjs.com Navigation drawer component The navigation drawer component contains internal navigation links for an appli..

#뷰 라우터 인스턴스 생성 및 뷰 인스턴스에 연결 아래와 같이 vue 인스턴스에 $route 변수가 주입된 걸 확인할 수 있다. #라우터가 표시되는 영역 라우터 인스턴스에 /login 과 /main url 및 url에 대응하는 컴포넌트 명을 선언해주었다. 만약 해당 url 이 호출 될 경우, 태그 영역에 해당 컴포넌트들이 주입이 될 것이다. 해당 소스 실행 결과는 다음과 같다. 1). http://127.0.0.1:5500/playground/router.html#/login url을 호출 한 경우 2). http://127.0.0.1:5500/playground/router.html#/main url을 호출 한 경우 #라우터 링크 아래와 같이 라우터 링크를 추가해주면 이런식으로 이동 링크를 제공해준다...