[Vue] vue-router (hash mode, guards)

1. Hash mode vs HTML5 mode

우리가 맨 처음 셋팅해놨던 코드는 이렇습니다.

(router.js)

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

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

history: createWebHistory() 이런 설정을 추가해 놨는데,
이게 문제가 되는 경우 다르게 설정해 놓을 수 있습니다.

(router.js)

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

const router = [];
const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

history: createWebHashHistory()
이렇게 설정해 놓는건데 이것을 Hash mode라고 합니다.
이걸 선택하시면 URL에 전부 #이 붙은 채로 시작합니다.
localhost/#/detail 이런식입니다.

1-1. HTML5 mode를 선택한 경우

누군가 /detail 이라고 URL 입력란에 입력하면 실은 이것은
Vue router로 /detail을 보여주세요~ 가 아니라
서버에 /detail 페이지를 요청해주세요~ 라는 뜻입니다.

그래서 Vue가 라우팅을 해주기 전에 서버가 /detail 페이지를 보여주려고 할 수도 있습니다
근데 서버에 아무 기능 개발을 안해놨으니 404페이지가 뜨거나 할 수 있습니다.
그래서 이런 현상을 방지하려면 서버에다가
어떤사람이 /detail로 접속하면 그냥 vue에게 라우팅 맡겨주세요~
라고 미리 기능개발이 필요합니다.

1-2. Hash mode를 선택한 경우

hash mode의 장점은 일단 URL에 #이 붙은채로 시작합니다.
localhost/#/ 이것이 메인페이지 입니다.
왜 # 을 붙이냐면, URL에서 #뒤에 있는 내용들은 절대 서버에 달되지 않아서 그렇습니다.

그래서 서버가 라우팅을 채가는 일을 방지할 수 있고,
Vue router에게 온전히 라우팅을 맡길 수 있습니다.
그래서 서버가 없으면 # 붙는 hash 라우터로 사이트를 만드는 것도 좋은 선택입니다.

2. Navigation guards

특정 URL로 접속할 때 뭔가 코드를 실행하고 싶은 경우가 있습니다.
예를 들어서 마이페이지를 만들었는데 이걸 로그인한 사람만 보여주고 싶은 경우
라우팅 해주기 전에 로그인여부를 확인하는 코드를 실행해야 합니다.
그럴때 navigation guard를 쓰면 됩니다.

이것은 네비게이션 해주기 전에 실행할 수 있는 코드, 그러니까 Hook 같은것이라고 보면 됩니다.

예를들어 /hello 라는 경로로 들어가기 전에 뭔가 검사를 해주고 싶으면
beforeEnter라는 항목을 만들어서 함수를 적어주면 됩니다.

const routes = [
  {
    path: "/hello",
    component: HelloWorld,
    beforeEnter: ()=>{
      if (로그인했나요 == false) {
        return '/login'
      }
    }
  }
];

위와 같은 식입니다.
/hello로 들어가기 전에 로그인했나요? 라는 변수가 false면 /logn페이지로 보내기 기능이 개발되어 있습니다.

const routes = [
  {
    path: "/hello",
    component: HelloWorld,
    beforeEnter: (to, from)=>{
      return to.fullPath
    }
  }
];

파라미터는 두세개 작명이 가능한데
첫 파라미터는 목적지 페이지, 두번째 파라미터는 출발 페이지입니다.
그리고 그것들은 $route 라는 변수랑 똑같이 이용 가능합니다.
to.fullPath 하면 전체 경로를 알려주고
to.params.id 하면 그 파라미터를 알려줍니다.

3. 여러 개 route에 같은 navigation guard를 추가하고 싶으면

router라는 변수에다가 .beforeEach() 라는 함수를 쓰면 됩니다.
내부엔 함수가 들어가는데 사용법은 아까와 같습니다.

const router = createRouter({ 어쩌구 })
router.beforeEach((to, from) => {
  //페이지 변경 전에 실행할 코드
})

라우팅 전에 뭔가 실행하고 싶으면 beforeEach() 혹은 beforeResolve()를 쓰면 되고
라우팅 하고 나서 뭔가 실행하고 싶으면 afterEach()를 사용하면 됩니다.

4. Vue 컴포넌트 안에서도 navigation guard를 쓸 수 있다.

vue 파일 안에서도 페이지 이동 시 함수를 실행할 수 있습니다.
lifecycle Hook created(), mounted()와 비슷하게 활용 하능합니다.

beforeRouteEnter(){}
beforeRouteUpdate(){}

라는 것들을 lifecycle hook 쓰는 위치에 쓰면 됩니다.
파라미터는 두개 입력가능한데 각각 목적지인 to, 출발지인 from을 의미합니다.
특정 페이지로 접속했을 때 ajax 요청하고 그럴 일이 있으면 여기에 사용하면 됩니다.

더 자세한 내용은 공식문서를 참고합니다.