7 — 중간 정리 —

source: categories/study/vue-beginner-lv3/vue-beginner-lv3_7.md

• vue training lv3

7.1 중간 정리 및 스타일링

라우터 리팩토링(모듈화)

src/routes/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import NewsView from "../views/NewsView";
import askRouter from "./modules/ask";
import jobsRouter from "./modules/jobs";
import usersRouter from "./modules/users";
import itemRouter from "./modules/item";

Vue.use(VueRouter);

const router = new VueRouter({
    mode: 'history', // mode history가 아니라면 기본적으로 로컬서버 접속했을 때, locolhost:8080/#/ <- 이렇게 # 해시값이 붙어있게된다.
                     // # 해시값을 제거해주는 것이 mode history이다.
    routes: [
        {
            path: '/',
            redirect: '/news',
        },
        {
            // path: url 주소
            path: '/news',
            // component: url 주소로 갔을 때 표시될 컴포넌트 ( 페이지단위라고 보면됨, 예를 들어서 MainPage 같은 페이지단위 컴포넌트 )
            component: NewsView,
        },
        ...askRouter,
        ...jobsRouter,
        ...usersRouter,
        ...itemRouter,
    ]
})

export default router

src/routes/modules/ask.js

import AskView from "../../views/AskView";

const askRouter = [
    {
        path: '/ask',
        component: AskView,
    },
]

export default askRouter

src/routes/modules/item.js

import ItemView from "../../views/ItemView";

const itemRouter = [
    {
        path: '/item',
        component: ItemView,
    },
]

export default itemRouter

src/routes/modules/jobs.js

import JobsView from "../../views/JobsView";

const jobsRouter = [
    {
        path: '/jobs',
        component: JobsView,
    },
]

export default jobsRouter

src/routes/modules/users.js

import UserView from "../../views/UserView";

const usersRouter = [
    {
        path: '/user',
        component: UserView,
    },
]

export default usersRouter

컴포넌트 수정

src/views/NewsView.vue

<template>
<div>
  <p v-for="(item, index) in fetchedNews" v-bind:key="index">
    <a v-bind:href="item.url">{{item.title}}</a>
    <small>{{item.time_ago}} by {{item.user}}</small>
  </p>
</div>
</template>

<script>
import {mapGetters, mapActions} from "vuex";

export default {
  name: "NewsView",
  computed: {
    ...mapGetters(['fetchedNews']),
  },
  methods: {
    ...mapActions(['FETCH_NEWS']),
  },
  created() {
    this.FETCH_NEWS();
  }
}
</script>

<style scoped>

</style>

src/views/AskView.vue

<template>
<div>
  <p v-for="(item, index) in fetchedAsk" v-bind:key="index">
    <a :href="item.url">
      {{item.title}}
    </a>
    <small>{{item.time_ago}} by {{item.user}}</small>
  </p>
</div>
</template>

<script>
import {mapGetters, mapActions} from 'vuex';

export default {
  name: "AskView",
  computed: {
    ...mapGetters(['fetchedAsk']),
  },
  methods: {
    ...mapActions(['FETCH_ASK']),
  },
  created() {
    this.FETCH_ASK();
  }
}
</script>

<style scoped>

</style>

src/views/JobsView.vue

<template>
<div>
  <p v-for="(job, index) in fetchedJobs" v-bind:key="index">
    <!-- v-bind 축약형 : -->
    <a :href="job.url">{{job.title}}</a>
    <small>{{job.time_ago}}, {{job.domain}}</small>
  </p>
</div>
</template>

<script>
import {mapGetters, mapActions} from "vuex";

export default {
  name: "JobsView",
  computed: {
    ...mapGetters(['fetchedJobs']),
  },
  methods: {
    ...mapActions(['FETCH_JOBS']),
  },
  created() {
    this.FETCH_JOBS();
  }
}
</script>

<style scoped>

</style>

다음 시간부턴 동적 라우트 매칭(다이나밍 라우트 매칭)에 대해 알아보도록 하겠습니다.