[Vue] Vue-router

1. CDN NPM 방식을 통해 vue-router 설치

• <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
• <script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
• npm install vue-router

2. Vue-router 이동 및 렌더링

• <router-link> → to속성, a태그로 변경됨
• <router-view> → link에 호출된 컴포넌트 보여줄 영역

3. router 정보 등록

• new VueRouter({옵션}) → routes: [{path, component, name, redirect, children}]
• new Vue({router 속성 설정 등록})
• to=”/path” to=”{name: “name”, params:{no: 3}, query: {no: 3}}” 동적 바인딩은 : 붙이기
  • params : /board:no
  • query : /board?no=no
• $router.push(to에 썼던 거) —> 프로그래밍적 방식
  

const router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/",
      name: "main",
      component: Main,
    },
    {
      path: "/board",
      name: "board",
      component: Board,
      redirect: "/board/list",
      children: [
        {
          path: "list", // 부모 path 뒤에 붙음 (/board/list)
          name: "boardlist",
          component: BoardList,
        },
        {
          path: "write",
          name: "boardwrite",
          component: BoardWrite,
        },
        {
          path: "detail/:no",
          name: "boardview",
          component: BoardView,
        },
        {
          path: "update/:no",
          name: "boardupdate",
          component: BoardUpdate,
        },
      ],
    },
	]
});