Vue.js 인프런 강의 - 섹션 5. '라우터 기본' 까지 진행

Cho Dragoo·2021년 6월 14일
0

이 스리즈에서는 인프런 강좌
"Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념" 을 수강하고 복습을 위한 기록을 하고 있습니다. 자세한 강의내용이 궁금하신 분은 https://www.inflearn.com/course/vue-js/dashboard 의 링크를 참고하세요.

섹션5 까지의 빌드 과정...



빌드환경 설정

  1. node.js 를 윈도우 또는 맥 또는 우분투 설치
  2. VScode 플러그인 설치
  3. Vetur, TSLint, ESLint, Auto Close Tag, Material Icon Theme, Night Owl(개인적으로는 비추천), Live Server
  4. 참고할 Vue 스타일 가이드 준비 https://kr.vuejs.org/v2/style-guide/index.html
  5. 프로젝트 진행중 빌드에 참고될 사이트 Hacker News https://news.ycombinator.com/ HNPWA API https://github.com/tastejs/hacker-news-pwas/blob/master/docs/api.md
  6. 라우터 설계 방법, 컴포넌트 페이지 구성방법를 구상하기
  7. 순서대로 $ vue i -g @vue/cli, $ vue create vue-news (vue-new는 프로젝트 폴더명) 터미널로 설치
  8. package.json파일에서 devDependencies의 vue-cli설치를 확인
  9. $ npm run serve 입력으로 서버 작동 확인


라우터 설치

  • $ npm i vue-router —save 명령어 입력 설치

  • src/routers/ index.js 파일 생성

  • 스샷대로 import 구문으로 vue-router 추가하고 Vue.use로 VueRouter 추가


  • 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 추가


  • 여기까지 진행된 파일트리


섹션 5 부터 '라우터 기본' 요약

// src / App.vue

<template>
  <div id="app">
    <router-view></router-view> 
// router/index.js에서 routes의 주소,vue파일이름를 확인 할 수있다.
  </div>
</template>


router-view의 활용

<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"} 에서 이 redirectrouter-link가 있는 페이지에 진입했을 때 나올 첫페이지를 결정해준다.



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>;
  • HTML에서 이렇게 a테그로 변환해준다.
profile
어떤 문제든 파악 할 수 있으며 해결책을 찾을 수 있는 개발능력을 꿈꾸고 있습니다.

0개의 댓글