Week 8. Vue Router 기초

Vue Router

Vue router를 이용하면 SPA를 손쉽게 구현 가능하다.

🍡 설치와 등록

• 설치: npm i vue-router@next
  

Vue 3 버전에 맞춰 vue-router도 next(4버전)로 설치.

• 등록

// root js
import { createApp } from 'vue'
import App from '~/App.vue'
import router from '~/routes' // routes 폴더안의 index.js 불러오기

const app = createApp(App)
app.use(router) // router 등록
app.mount('.app')

🍡 $route, $router

• $route: router와 관련된 정보 저장
• $router: 조작

🍡 mode

hash mode

형태: 도메인/#/~~

• 도메인 주소로 요청이 한번 가고,
  나머지 주소는 #를 통해 페이지를 구분하지만 요청을 보내지 않음.
• 장점: 서버에 요청을 최소화함.
• 단점:
  (1) url이 지저분해보일 수 있음.
  (2) 하나의 도메인만 사용하기 때문에 검색 엔진 최적화(SEO) 불리.

hash mode 사용

import { createRouter, createWebHashHistory } from 'vue-router'

export default createRouter({
  history: createWebHashHistory() // hash mode로 사용
  routes: [
    {
      path: __,
      name: ___, // $router.push({ name:  }) 형태로 라우팅 가능
      component: __ // 컴포넌트 등록
      children: [
        {},
      ]
    }
  ]
})

• 파라미터 등록하기

{
  path: '/경로/:등록할 파라미터'
}

• 파라미터 꺼내기

$route.params.등록한 파라미터

HTML5 mode (history)

형태: 도메인/~~

• 장점: 검색 엔진 최적화 유리
• 단점: 기본적인 도메인을 사용하므로 서버에 매번 요청 전송 가능성.

⚠️ HTML5 mode를 사용하기 위해 번들러 설정을 해줘야 함

module.exports = {
  output: {
    publicPath: '/' // 도메인 주소에서 절대 경로로 접근하도록
  },
  devServer: { // 배포하는 서버에 옵션을 추가해야 함.
    historyApiFallback: true // index.html로 fallback
  }
}

• publicPath: '/'
  기존 상대경로에서 찾던 문제를 절대경로로 바꿔줌으로써
  앞의 도메인 주소를 생략해 해결.
• historyApiFallback: true
  도메인 주소가 변경될 때마다 서버에 요청을 하게 되는데,
  index.html로 fallback 시켜줌.

⚠️ 현재는 local에서 개발하므로 devServer에 옵션을 추가했지만,
배포하는 서버에 옵션을 추가해줘야 함!!

🍡 Navigation Guards

라우팅이 일어나기 전에 보호하는 로직 설정

before Guards

• beforeEach
  라우팅되기 직전에 guard 역할

router.beforeEach((to, from) => {
  return {
    path: ,
    query: { redirect: to.fullPath } // redirect 쿼리 스트링에 사용자가 원래 접근하려했던 페이지 정보를 담아 보내줌
  }
})

• to: 현재 접근하는 페이지에 관한 정보를 담고 있음
• from: 이전 페이지에 관한 정보를 담고 있음

Resolve Guards

before Guards와 동일하지만, 순서에 차이 🙆‍♀️

In-Component Guards

컴포넌트 내부에서 사용하는 가드들
⚠️ 되도록이면 권장하지 않음! 가드를 추적하기 힘들어짐

• beforeRouteEnter: 해당 경로에 접속하기 직전 실행
  👉🏻 guard 내부에서 this 사용 불가
• beforeRouteUpdate: 현재 컴포넌트가 사용하는 라우트가 변경됐을 때
• beforeRouteLeave: 해당 경로를 떠나기 직전 실행

After Hooks

검증이 다 끝나고 제일 마지막에 실행되는 훅

Per-Route Guard

라우트별로 guard 추가

• beforeEnter: ((to, from) => )

순서

1. Navagation triggered
2. beforeRouteLeave (비활성화될 컴포넌트가 있을 때 실행됨)
   --- 네비게이션 검증
3. 전역적으로 beforeEach 실행
4. In-Component Guards 실행
5. beforeResolve
   --- 네이게이션 컴펌 완료
6. afterEach

🍡 Meta field

const routes = [
  {
    meta: { requireAuth: true } // 인증이 필수인 페이지라 명시 (단순 정보)
  }
]

느낀점

우... 라우팅은 언제나 헷갈린다
navigation guards로 라우팅되기 전에 가드할 로직을 설정할 수 있는데
요게 뭔가 와닿지가 않는다!!!
노션 클로닝 하면서 익숙해져야겠다