[Vue.js] Router 설치 및 환경 설정(Vue 3)

 

Router 설치

 

npm i vue-router@next
# vue 3 버전부터는 vue-router가 아닌, 다음의 명령어로 설치를 진행

 

폴더와 파일, 모듈 등 생성

 

src/router/index.js 생성

 

 

컴포넌트 import 후 path와 함께 등록해 줍니다. path는 "/" 뒤에 적절한 텍스트를 입력해 경로를 지정해 줍니다.

 

모듈 가져오기

 

 

라우터 영역 지정하기

 

<!-- src/App.vue -->

<template>
    <v-app>
      <v-main>
        <router-view/>
      </v-main>
    </v-app>
</template>

<!-- 페이지 전환이 있을 곳에 router-view 태그로 감싸줌 -->

 

<!-- src/views/Login.vue -->

<template>
    <div>
      <router-link to="/이동할 페이지">
        <v-btn type="submit">로그인</v-btn>
      </router-link>
    </div>
</template>

<!-- 버튼이나 이미지 등, 클릭 시 이동될 태그를 router-link to="/"로 감싸줌 -->