[TODO] vue-router, todo 컴포넌트 추가

vue-router 추가하는 상세한 설명은 [Vue.js/Typescript] 4. Vue-router 포스팅으로.

// src/routes/index.ts
 
import Vue from 'vue'
import VueRouter from 'vue-router'
 
// modules
import Product from '../components/Product';
import Todo from '../components/Todo';
import NotFound from '../components/NotFound';
 
Vue.use(VueRouter)
 
export const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            component: Product
        },
        {
            path: '/todo',
            component: Todo
        },
        {
            path: '/404',
            component: NotFound
        },
        {
            path: '*',
            redirect: '/404'
        }
    ]
})

routes 설정은 위와 같이 했다. 오늘 사용할 path는 /todo

// src/cocmponents/Todo/index.ts
 
import { Vue, Component, Prop } from "vue-property-decorator";
 
class TodoItem {
    name: string = '';
    todo: string = '';
 
    constructor(name:string, todo: string){
        this.name = name;
        this.todo = todo;
    }
}
 
@Component({
    template: require('./Todo.html')
})
export default class Todo extends Vue {
    todos: TodoItem[] = [
        new TodoItem("아침","늦잠자라"),
        new TodoItem("점심","낮잠자라"),
        new TodoItem("아침","이제자라")
    ];
}

Todo 컴포넌트를 생성한다.

TodoItem이라는 클래스를 만들고 해당 클래스에는 name, todo라는 필드 2개를 만들었다.

name은 타이틀, todo는 상세 설명을 적었다.

TodoItem 클래스 배열 데이터형으로 todos 이름의 데이터(? 변수?)를 만들었다.

일단 mock 데이터로 3개의 아이템을 만들어 배열에 넣어두었다.

나중에 Vuex로 옮길 예정인데 오늘은 화면에 보여주는 것까지만.

// src/cocmponents/Todo/Todo.html
 
<div>
    TODO 리스트
    <ul>
        <li v-for="item in todos">
            name : {{ item.name }} / todo : {{item.todo}}
        </li>
    </ul>
</div>

화면에는 위와 같이 todos를 for문으로 돌면서 name, todo를 출력해줬다.

[결과화면]

---

참고 깃허브 : add router, add Todo component