이 스리즈에서는 인프런 강좌
"Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념" 을 수강하고 복습을 위한 기록을 하고 있습니다. 자세한 강의내용이 궁금하신 분은 https://www.inflearn.com/course/vue-js/dashboard 의 링크를 참고하세요.
vue i -g @vue/cli
, $ vue create vue-news
(vue-new는 프로젝트 폴더명) 터미널로 설치 package.json
파일에서 devDependencies의 vue-cli
설치를 확인 npm run serve
입력으로 서버 작동 확인npm i vue-router —save
명령어 입력 설치src/routers/ index.js
파일 생성src / views
폴더에 newsView.vue
같은 페이지 담당 파일 3개 만든다.src / router / index.js
에서 만들어진 View 컴포넌트들을 impor
한 후 View 컴포넌트의 path와 이름을 뷰 인스턴스
에 등록, index.js
로 넘겨 줄려면 적색 동그라미의 export를 반드시 하자src/main.js
로 돌아와서 router / index.js
를 import한다.src / router / index.js
에서의 작업내용를 연결하기 위해 new Vue({})
안에 router 추가// src / App.vue
<template>
<div id="app">
<router-view></router-view>
// router/index.js에서 routes의 주소,vue파일이름를 확인 할 수있다.
</div>
</template>
<router-view>
는 설정한 라우터의 파일내용 페이지의 위치를 지정해준다.
// scr / router / index.js
import Vue from "vue";
import VueRouter from "vue-router";
// import로 Vue, VueRouter를 불러오고 Vue.use(VueRouter)로 사용한다.
import NewsView from "../views/NewsView.vue";
import AskView from "../views/AskView.vue";
import JobsView from "../views/JobsView.vue";
Vue.use(VueRouter);
// 이 뷰 인스턴스가 라우터의 내용을 담게된다.
export const router = new VueRouter({
routes: [
{
path: "/",
redirect: "/news",
},
{
path: "/news",
// path: url 주소
component: NewsView,
// component: url 주소로 갔을 때 표시될 컴포넌트
},
{
path: "/ask",
component: AskView,
},
{
path: "/jobs",
component: JobsView,
},
],
});
{path: "/", redirect: "/news"}
에서 이 redirect
는 router-link
가 있는 페이지에 진입했을 때 나올 첫페이지를 결정해준다.
지금까지의 생성된 라우터에서는 직접 주소창에 입력해서 페이지 이동을 해야한다. 이것에 그치지 않고 브라우저의 링크 선택으로 페이지에 진입하는 홈페이지의 기본적인 기능을 구현하고자 할 때 유용한 router-link
는 페이지 이동을 담당하는 컴포넌트로 연결해준다.
// scr / components / ToolBar.vue
<template>
div>
<router-link to="/news">News</router-link>
<router-link to="/ask">Ask</router-link>
<router-link to="/jobs">Jobs</router-link>
</div>
</template>
to=""
에 이동할 url
을 넣어둔다.
<div id="app">
<div>
<a
href="#/news"
class="router-link-exact-active router-link-active"
aria-current="page"
> // news 링크를 선택한 테그만 class와 aria-current가 활성화 되었다.
News
</a>
<a href="#/ask" class="">
Ask
</a>
<a href="#/jobs" class="">
Jobs
</a>
</div>
<div> news </div>
</div>;