Page 456 - MDP2022-3

name: 'BoardList',
component: BoardList
},
{
path: '/board/detail',
name: 'BoardDetail',
component: BoardDetail
},
{
path: '/board/write',
name: 'BoardWrite',
component: BoardWrite
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router

▶ Vue.js 코드
<template>
<div class="board-detail">
<div class="common-buttons">
<button type="button" class="w3-button w3-round w3-blue-gray" v-on:click="fnSave">저장</
button>
<button type="button" class="w3-button w3-round w3-gray" v-on:click="fnList">목록</butto
n>
</div>
<div class="board-contents">
<input type="text" v-model="title" class="w3-input w3-border" placeholder="제목을 입력해주세
요.">
<input type="text" v-model="author" class="w3-input w3-border" placeholder="작성자를 입력
해주세요." v-if="idx === undefined">
</div>
<div class="board-contents">
<textarea id="" cols="30" rows="10" v-model="contents" class="w3-input w3-border" style="re
size: none;">
</textarea>
</div>
<div class="common-buttons">
<button type="button" class="w3-button w3-round w3-blue-gray" v-on:click="fnSave">저장</
button>
<button type="button" class="w3-button w3-round w3-gray" v-on:click="fnList">목록</butto
n>