따자 Router 이해 시키기 프로젝트

Vue 라우터 연결

---

우리 라우터는 여기서 관리 될꺼야.

 

 

 

 

 

 

 

 

 

 

---

전체적인 라우터는 router 아래 index.js 에서 관리하고

 

 

 

---

우리 프로젝트가 일단 분야별로 라우터를 매칭한다는 것 자체가 비효율 적일꺼야. 왜냐면 자격증 분야별로 나누고 그 하위 요소들은 공통적인 컴포넌트로 이루어질 것 이기 때문에 license 아래 자격증 별 router 들이 구성 될꺼야.

---

예를 들어서 정보처리기사를 들어 봤는데,

이런식으로 자격증이 추가 될 때마다 하나의 폴더를 추가 해야해.

 

 

---

정보 처리 기상에 필요한 라우터 들은 모드 여기 index.js 에서 관리 할꺼야

 

 

 

---

정보 처리 기사의 라우터를 담고 있는 index 를 보면

아래처럼 구성이 되어 있을꺼야.

 

 

 

import Layout from '@/layout'

const jeongboCheoliGisaRouter = {
  path: '/jeongbo-cheoli-gisa',
  component: Layout,
  redirect: '/',
  name: 'jeongbo-cheoli-gisa', 
  children: [
    {
      path: 'index',
      component: () => import('@/views/license/jeongbo-cheoli-gisa'),
      name: '정보처리기사',
      meta: { title: '정보처리기사', noCache: true }
    } 
  ]
}
export default jeongboCheoliGisaRouter

 

 

 

 

위에 매핑 되어 있는 라우터가 하나밖에 없잖아. 일단 우리가 매핑 되어 있는 주소로 가려면

<router-link> 를 이용해야해.

 

<router-link to="/jeongbo-cheoli-gisa/index">정보 처리 기사 </router-link>

vue 파일에서 이런식으로 url 을 매핑해줘.

<a> 태그랑 똑같아.

---

위에 라우터 링크를 클릭하면 아래 url 으로 이동해.

 

즉, Parent Path / Child Path

 

Parent Component 는 항상 Layout 을 가지고 있어야 해.

Child Component 에 우리가 만든 vue 파일을 삽입하는거지.

 

---

그리고 저렇게 쓰기만 적용한다고 라우터가 매핑 되는게 아니야 !

 

router/index.js 가 메인 라우터거든 여기에 매핑을 시켜줘야 완성이야.

 

1. import 하기

import jeongboCheoliGisaRouter from './license/jeongbo-cheoli-gisa';

2. asyncRoutes 매핑

 

 

자 내가 위에 주석까지 깔끔하게 달았으니까 어느날 이해가 된다면 주석은 지워주길 바래.

---

참고로 @/views/license/jeongbo-cheoli-gisa 는 폴더 이름이고

자동으로 index 랑 매핑 되는거야 ! []~(￣▽￣)~*

 

 

 

 

 

 

 

 

---

페이지 Component 합체

---

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

 

 

여기 App.vue

라우터 뷰에 페이지가 로딩 되는거야

---

import App from './App'
import store from './store'
import router from './router'

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

 

main.js 에 보면 import 한 것 중에 위에서 우리가 라우터 매핑 했던 router/index.js 있지?

그게 위에서 나오는 router야.

 

아까 상위요소가 Layout Component 로 가지고 있었잖아! 자동 매핑 되는거지.

---

W 깃허브를 잘 부탁해 (●ˇ∀ˇ●)

---