<aside> <img src="/icons/checkmark-line_lightgray.svg" alt="/icons/checkmark-line_lightgray.svg" width="40px" />

views경로에 boards 디렉토리를 만들고 위와 같이 네개의 페이지를 생성,

각 페이지는 아래와 같이 <h1>태그에 등록, 상세, 수정, 목록이라고 작성!

</aside>

<template>
  <div>
    <h1>게시글 등록</h1>
    <hr />
  </div>
</template>

<script setup></script>

<style lang="scss" scoped></style>

Route 설정 등록

• index.js

  import { createRouter, createWebHistory } from 'vue-router'
  import HomeView from '@/views/HomeView.vue'
  import AboutView from '@/views/AboutView.vue'
  import BoardCreateView from '@/views/boards/BoardCreateView.vue'
  import BoardDetailView from '@/views/boards/BoardDetailView.vue'
  import BoardEditView from '@/views/boards/BoardEditView.vue'
  import BoardListView from '@/views/boards/BoardListView.vue'
  
  const routes = [
    {
      path: '/',
      name: 'Home',
      component: HomeView,
    },
    {
      path: '/about',
      name: 'about',
      component: AboutView,
    },
    {
      path: '/boards',
      component: BoardListView,
    },
    {
      path: '/boards/create',
      component: BoardCreateView,
    },
    {
      path: '/boards/:boardId',
      component: BoardDetailView,
    },
    {
      path: '/boards/:boardId/edit',
      component: BoardEditView,
    },
  ]
  
  const router = createRouter({
    history: createWebHistory('/'),
    routes,
  })
  
  export default router
  

  <aside> <img src="/icons/checkmark-line_lightgray.svg" alt="/icons/checkmark-line_lightgray.svg" width="40px" />

  :boardId는 동적 라우팅을 위해 만듬 *하나의 페이지로 게시글 id마다 다른 내용 표시

  </aside>

지금은 아무거나 입력해도 상세보기 페이지로 오지만, 게시글 id를 바인딩하기

:

:( 세미콜론 )은 파라메터로 route객체의 prams로 받을 수 있다.

🔶 query, hash

query, hash를 이용해서도 URL을 통해 파라메터를 넘길 수 있다.

🔸 query

🔸 hash