Vue Router

코딩애플 강의와 인프런 강의를 들으며 Router를 어떻게 써야하는 지 공부했었는데, 오늘 현업코드를 보면서 좀 다른것을 느꼈다... 허... 뭔가 심오해서 느낀점을 기록함...

기본 사용법

1. npm 명령어로 설치해준다.

npm install vue-router

2. 라우터 파일을 만들어준다. src폴더 안에 아무곳에 router.js파일을 만든다.

import { createWebHistory, createRouter } from "vue-router";

const routes = [
  {
    path: "/경로",
    component: import해온 컴포넌트,
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

3. main.js에도 라우터를 등록한다.

import router from './router'
createApp(App).use(router).mount('#app') 

4. /list로 접속했을 때, List.vue 컴포넌트를 보여주고 싶으면

(router.js)

import List from './components/List.vue';

const routes = [
  {
    path: '/list',
    component: List,
  }
];

5. 라우트를 하나 더 만들고 싶으면

(router.js)

import List from './components/List.vue';

const routes = [
  {
    path: '/list',
    component: List,
  },
  {
    path: '/경로',
    component: 위에서 import 해온 컴포넌트
  }
];

6. 페이지 이동 링크를 만들고 싶으면

<router-link to="/list">이동하기</router-link>

위 방법이 기본적인 사용법이다. 하지만 현업코드는 좀 많이 다르다..

현업에서 어떻게 사용하는가

1. 코드 스플리팅 적용

• login페이지와 signup페이지 두 가지가 존재할 때 라우트 변경으로 현재 페이지가 변경되더라도 개발자 도구의 Network 탭에는 변화가 없다. 그 이유는 SPA(Single Page Application)이기 때문이다.
  
  
• 결론적으로 app.js 안에 모든 페이지의 정보가 들어가 있다.
  
  
• 실제 현업 프로젝트에는 화면의 갯수가 엄청나게 많다. 그 많은 페이지들을 한 번에 다 로딩해오는 것은 많은 시간이 소요된다.
  
  
• 따라서 login 페이지로 접속했을 때, login 페이지만 먼저 가져오고, 나머지 페이지들은 해당 url로 이동했을 때만 들고 오게 하는 것이 코드 스플리팅의 역할이다.
  
  
• 사용법은 화살표함수를 사용하여 compoenet : ()=>{import ("컴포넌트 경로")}

import { createWebHistory, createRouter } from "vue-router";

const routes = [
  {
    path: "/경로",
    component: ()=> import("@/views/LoginPage.vue") //기존에는 import해온 컴포넌트
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

2. Router meta 활용

라우팅을 하다보면 조건부 랜더링? 이 필요한 상황이 있다. 예를 들어 로그인 페이지에는 Nav바가 안보이게 하거나, ui 레이아웃을 다르게 보여주고 싶거나 할 때, 바로 이때 Vuex를 사용해서 각 메뉴별로 관리하는 방식이다.

1. store 에 state를 저장해 두고 A페이지에서는 그것만 빼줘~ 이런식으로 관리하는 느낌이다.

// router.js
const updateRouteLayout = async meta => {
  await store.dispatch('layout/updateRouteLayout', {
    isHeader: meta.isHeader,
    titleName: meta.titleName,
    isBack: meta.isBack,
    isNav: meta.isNav,
    isSearch: meta.isSearch
  })
}

{
    path: '/sign/in',
    name: 'SignIn',
    component: () => import('@/views/sign/in/index.vue'),
    meta: {
      isHeader: true,
      isNav: false,
      isBack: true,
      titleName: '',
      isSearch: false
    }
  },

Vuex와 같이 사용하다 보니 아직은 잘 이해가 안가는데... 대충 어떤 느낌인지는 알것 같다.
파이팅...