58. <vue-news> 프로젝트 | Dynamic Route Matching | 동적 라우트 매칭

routes 폴더의 <index.js>

import Vue from 'vue'
import VueRouter from 'vue-router'
import NewsView from '../views/NewsView.vue'
import AskView from '../views/AskView.vue'
import JobsView from '../views/JobsView.vue'
import ItemView from '../views/ItemView.vue'
import UserView from '../views/UserView.vue'

Vue.use(VueRouter);

export const router = new VueRouter({
    mode: 'history', // url #값 제거
    routes: [ //routes도 커졌을때 모듈화 가능
        {
            path: '/',
            redirect: '/news',
        },
        {
            path: '/news', // url에 대한 정보가 담기는곳, url주소
            component: NewsView, // url 주소로 갔을때 표시될 컴포넌트
        },
        {
            path: '/ask',
            component: AskView,
        },
        {
            path: '/jobs',
            component: JobsView,
        },
        {
            path: '/item',
            component: ItemView,
        },
        {
            path: '/user/:id',
            component: UserView,
        },
    ]
});

---

<NewsView.vue>

<template>
    <div>
        <!-- v-bind:key 에는 객체 넣을수없고 숫자, 문자만 넣을수 있다 -->
        <!-- <div v-for="(user, i) in fetchedNews" v-bind:key="i">{{ user.title }}</div> -->

        <p v-for="(item, i) in fetchedNews" v-bind:key="i">
            <a v-bind:href="item.url">
                {{ item.title }}
            </a>
            <small>{{ item.time_ago }} by
                <!-- <router-link v-bind:to="'/user' + item.user">
                    {{ item.user }}
                </router-link> -->
                <router-link v-bind:to="`/user/${item.user}`">
                    {{ item.user }}
                </router-link>
            </small>
        </p>
    </div>
</template>

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

export default {   
    computed: {
        ...mapGetters(['fetchedNews'])
    }, 
    created(){
        this.$store.dispatch('FETCH_NEWS');
    }
};
</script>

<style lang="scss" scoped>

</style>