meong_j
기록하는 습관.
meong_j
전체 방문자
오늘
어제
  • 분류 전체보기 (176)
    • 개인 공부 정리 (0)
    • 서버 운영 (37)
      • Linux (36)
    • Frontend (11)
      • Vue.js (10)
    • Backend (70)
      • Java (4)
      • Python (22)
      • Django (38)
      • Spring (6)
    • Database (5)
      • Oracle (4)
      • MySQL (1)
      • MariaDB (0)
    • Android (14)
      • Kotlin (6)
    • 배포 (9)
      • Docker (8)
      • AWS (1)
    • IT_study (29)
      • Coding test (17)
      • 알고리즘 (5)
      • 스터디 (6)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • github

인기 글

반응형

태그

  • django
  • 배포인프라
  • 중첩라우트
  • cpu사용률
  • dockersecret
  • docker
  • router-link
  • gabagecollecter
  • dp #알고리즘
  • 리눅스방화벽
  • Proxy
  • DHCP
  • SASS Variables
  • 이차원배열정렬
  • 리눅스인증
  • Kotlin
  • 안드로이드adaptor
  • 개발자도서
  • 코틀린자료형
  • 테크커리어

최근 댓글

최근 글

250x250
hELLO · Designed By 정상우.
meong_j

기록하는 습관.

[Vue.js] Vue-Router 설치 및 적용하기
Frontend/Vue.js

[Vue.js] Vue-Router 설치 및 적용하기

2021. 12. 14. 13:16
728x90
반응형

라우팅(Routing) 이란 데이터를 보낼 때 경로를 찾아가는 과정을 말한다. 

  • 서버 라우팅 : 매번 주소를 요청할 때마다 화면이 갱신됨 ex) 네이버, 구글
  • 브라우저 라우팅 : 주소를 요청하더라도 필요한 데이터만 가져와서 따로 갱신됨, 효율적으로 화면을 갱신할 수 있음 ex) 구글메일, 트렐로

vue 에서 라우터를 이용하여 싱글 페이지 앱을 만들 수 있고, 라우터에 컴포넌트를 맵핑한 후 어떤 주소를 렌더링 할 것인지 알려주면 vue router 기능을 사용할 수 있다.

 

vue.js 동작원리 

main.js > route 혹은 App.vue 로 이동 > router에 설정한 페이지로 이동

 

https://router.vuejs.org/kr/guide/

 

시작하기 | Vue Router

시작하기 Vue와 Vue 라우터를 이용해 싱글 페이지 앱을 만드는 것은 매우 쉽습니다. Vue.js를 사용한다면 이미 컴포넌트로 앱을 구성하고 있을 것입니다. Vue 라우터를 함께 사용할 때 추가로 해야하

router.vuejs.org

 

 

vue-router 설치

npm i vue-router --save--dev

vue에서 router를 사용하기 편하도록 vue-router 라이브러리를 설치한다. 

 

main.js

import VueRouter from 'vue-router'

Vue.use(VueRouter)

설치 한 후 main.js 에 vueRouter를 import 하고 선언해준다.

 

const Login = { template: '<div>Login Page</div>' }
const NotFound = { template: '<div>Page not found</div>' }



const router = new VueRouter({
  mode: 'history',
  routes : [
    { path: '/', component: App },
    { path: '/login', component: Login },
    { path: '*', component: NotFound }
  ]
})

new Vue({
  el: '#app',
  router,
  render: h => h({template: '<router-view></router-view>'})
})

router 경로와 component를 연결시켜주었고, 각 route에 맞게 rendering 하였다.

  • 경로 '/' - App.vue로 이동
  • 경로 '/login' - Login 함수 template적용
  • 지정된 경로 없을 경우 - NotFound 함수 template 적용

크롬 브라우저에서 해시모드일 경우 # 경로가 앞에 붙게 되는데(예- localhost:8080/#/login ) mode : 'history'를 추가해줄 경우 # 경로가 적용되지 않게 되어 localhost:8080/login 로 이동이 가능하다.

 

[ 적용된 결과 ]

 

router 폴더 따로 만들어 리팩토링

main.js 에 있던 router 설정들을 router라는 폴더를 만들어서 index.js로 이동시켜 따로 router들을 관리해보았다.

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from '../App.vue'

Vue.use(VueRouter)

const Login = { template: '<div>Login Page</div>' }
const NotFound = { template: '<div>Page not found</div>' }



const router = new VueRouter({
  mode: 'history',
  routes : [
    { path: '/', component: App },
    { path: '/login', component: Login },
    { path: '*', component: NotFound }
  ]
})


export default router

 

관련 router설정 들을 복사해서 붙여넣고, 모듈로 만들어서 export 하였다.

 

App.vue

import Vue from 'vue'
import router from './router'

new Vue({
  el: '#app',
  router,
  render: h => h({template: '<router-view></router-view>'})
})

만든 router 모듈을 App.vue로 import 시켜준다. 경로는 router 폴더로 잡으면 하위 경로에 있는 모든 파일들이 적용된다. 

반응형
저작자표시 비영리 변경금지 (새창열림)

'Frontend > Vue.js' 카테고리의 다른 글

Vue.js - 라우터링크(router-link)  (0) 2021.12.14
Vue.js - 라우터뷰(Router view)  (0) 2021.12.14
Vue-Cli로 Vue.js 프로젝트 생성하기  (0) 2021.12.14
vuetify SASS Variables를 활용한 Style Custom  (0) 2021.12.13
Vuetify 소스 파일 구조 알아보기  (0) 2021.10.04
    'Frontend/Vue.js' 카테고리의 다른 글
    • Vue.js - 라우터링크(router-link)
    • Vue.js - 라우터뷰(Router view)
    • Vue-Cli로 Vue.js 프로젝트 생성하기
    • vuetify SASS Variables를 활용한 Style Custom
    meong_j
    meong_j
    #it #개발일기 #개발공부 #개발자 #백앤드 #생각정리 #시간은 실력에 비례한다 #뭐든지 꾸준히 열심히 #오늘의 내가 내일의 나를 만든다

    티스토리툴바