이 글은 https://medium.freecodecamp.org/how-to-use-routing-in-vue-js-to-create-a-better-user-experience-98d225bbcdd9 의 글을 번역한 것입니다.
번역 내용 자체도 온전치않으니 번역이 이상한곳이나 오타를 알려주시면 반영토록하겠습니다.
Vuejs는 Evan You가 만든 Javascript 프레임 워크이다. Vuejs는 단일 웹 페이지 앱과 유연한 컴포넌트를 만드는데 사용된다. 그리고 Front End 웹 개발에서 가장 필요한 스킬들 중 하나다.
당신은 여기에서 Vuejs에 대해 더 배울 수 있다.
Vue.js는 재사용할 수 있는 웹 컴포넌트를 만들 수 있는 여러 기능들을 제공한다. 라우팅은 그런 방법들 중 하나입니다. 라우팅은 사용자가 페이지를 새로고침 하지않고 페이지 전환을 할 수 있도록 합니다. 네비게이션을 당신의 웹 애플리케이션에서 쉽고 멋지게 만들 수 있습니다.
이 기사에서는 Vue 템플릿 예제를 만들어서 Vue.js 라우터가 동작하는 방법을 설명합니다.
시작하기
새 Vuejs 프로젝트를 설치하고 만들어서 우리의 Vue.js 라우터 프로젝트를 시작해보자.
우리는 Node.js 설치가 필요하다. 새 Vue.js 프로젝트를 만드는데 vue-cli를 사용할 것이다. 아래의 명령어를 따라해보자.
터미널에서 코드를 따라쳐보자:
vue init webpack vue-router
// 만약 vue 버전이 3이라면 아래를..
vue create vue-router
cd vue-router
//
npm run dev주소창에 http://localhost:8080 검색!
텍스트 에디터에서 생성한 프로젝트를 열어보자. 컴포넌트 폴더 안에 HelloWorld.vue 파일을 열고 아래의 행동을 해보자!
HellowWorld.vue를 home.vue로 이름 바꾸기. 모든 코드를 지우고 아래처럼 바꾸기.
<template>
<div class=”home”>
<h1>Home</h1>
</div>
</template>
<script>
export default {
name: ‘home’,
data () {
return {
msg: ‘Welcome to Your Vue.js App’
}
}
}
</script>
<! — Add “scoped” attribute to limit CSS to this component only →
<style scoped>
</style>router 폴터를 만들고 안에 index.js를 만들어 밑의 코드를 붙여넣자.
(만약 router가 있는 것으로 vue-cli를 이용하였다면 HelloWorld를 home으로 바꾸자.
import Vue from 'vue'
import Router from 'vue-router'
import home from '@/components/home'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: home
}
]
})App.vue 파일을 아래처럼..
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
}
</style>그리고.. 이제 코드를 작성해봅시다!
우리는 이제 Bootswatch 템플릿을 추가할것이다. 다른 어떤 템플릿을 선택해도 좋습니다. 나는 Cosmo를 선택했다. 소스를 보려면 Ctrl + U를 클릭히고 Navbar를 복사하자(우리는 navbar가 필요하다). App.vue 컴포넌트 안에 코드를 붙여넣자.
이렇게 되었다. 😃
다음, 우리는 세개의 다른 컴포넌트를 만들것이다. Blog, Services 그리고 Contact.
컴포넌트 폴더 안에 새 파일을 만들고 이름을 blog.vue로 하고, 이 코드를 복사 + 붙여넣자.
<template>
<div class="blog">
<h1>{{blog}}</h1>
</div>
</template>
<script>
export default{
name:'blog',
data (){
return{
title:'Blog'
}
}
}
</script>
<style scoped>
</style>service와 contact 컴포넌트에도 같은 동작을 수행하자. 그러기 위해선 component 폴더안에는 아래의 파일들이 있어야합니다.
- home.vue
- blog.vue
- services.vue
- contact.vue
라우터 설정
지금 4개의 컴포넌트를 만들었으니 컴포넌트 간에 navigate를 할수 있도록 라우터 설정이 필요하다.
어떻게 라우터를 사용해 각 컴포넌트로 넘어갈 수 있을까?
우리는 라우팅의 규칙을 배울 필요가 있다. 지금, 우리는 라우터 폴더안의 index.js를 열어 약간 수정을 해야한다.
따라해보자.
- 먼저 index.js에 컴포넌트들을 가져오자. import 메서드를 사용해 모든 컴포넌트를 가져오자.
import home from '@/components/home'
import blog from '@/components/blog'
import services from '@/components/services'
import contact from '@/components/contact'- 두번째로 Vue를 가져오고 라우터 모듈을 vue-router로부터 가져오자.
import Vue from 'vue'
import Router from 'vue-router'
// use router
Vue.use(Router)만약 vue-cli로 Vue를 설치했다면 vue-router 모듈은 기본적으로 가져옵니다.
- 마지막으로 router 폴더 안에 라우터가 동작하도록 구성해야합니다. 라우터 메서드는 각 컴포넌트의 속성으로 객체의 배열을 가집니다.
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: home
},
{
path: '/blog',
name: 'blog',
component: blog
},
{
path: '/services',
name: 'services',
component: services
},
{
path: '/contact',
name: 'contact',
component: contact
}
]
})path: 컴포넌트의 경로name: 컴포넌트의 이름component: 컴포넌트의 화면
어떤 컴포넌트를 기본 컴포넌트로 만드려면 ‘/’로 path 속성에 입력해주면 됩니다.
path: '/'우리의 예제에서는 기본 페이지로 home 컴포넌트로 설정했다. 브라우저에서 프로젝트를 열어볼때 첫번째 페이지는 home 페이지가 보여질 것이다.
{
path:'/',
name:'home',
component:home
}vue-router는 매개변수와 메서드를 가지고 있지만 우리는 이 세션에서 이 점을 알아보지 않습니다.
아래의 속성과 메서드는 vue-router와 사용할 수 있는 목록들이다.
이제 여러분은컴포넌트의 이름을 타이핑해서 어떤 컴포넌트를 검색할 수 있습니다!
router-link
지금 우리는 router-link 요소를 사용해서 만든 Navbar를 통해 네비게이션을 설정할 것이다.
그러려면 우리는 <a></a> 엘리먼트를 <router-link></router-link>처럼 바꿔야한다.
<li class="nav-item">
<router-link class="nav-link" to="/blog">Blog</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/services">Services</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/contact">contact</router-link>
</li>router-link는 컴포넌트의 경로를 값으로 to='path' 속성을 갖는다.
마무리
다음으로는 home.vue에 제품들의 정보를 추가하고 세부정보를 볼 수 있는 페이지로 넘어가는 기능을 만들어 볼 것입니다. router-view를 사용해 본격적으로 컴포넌트를 변경시켜봅시다.
그럼 다음 포스트에서 뵙겠습니다. link
