Hash mode vs HTML5 mode, Navigation guards(로그인 확인)

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

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

 

history: createWebHashHistory()

이렇게 설정해놓는건데 이걸 Hash mode라고 한다

이걸 선택하시면 URL에 전부 #이 붙은 채로 시작한다.

codingapple.com/#/detail 이런 식

 

 

- HTML5 mode를 선택한 경우

누군가 /detail 이라고 URL란에 입력하면 실은 이건

Vue router로 /detail을 보여주세요~가 아니라

서버에 /detail 페이지를 요청해주세요~ 라는 뜻입니다. 

그래서 Vue가 라우팅을 해주기 전에 서버가 /detail 페이지를 보여주려고 할 수도 있습니다.

근데 서버에 아무 기능을 개발안해놨으니 404페이지가 뜨거나 그럴 수 있습니다.  

그래서 이걸 방지하려면 서버에다가 "어떤 사람이 /어쩌구로 접속하면 그냥 Vue에게 라우팅 맡겨주세요~" 라고 미리 기능개발이 필요합니다. 

 

- Hash mode를 선택한 경우

hash mode의 장점은 일단 URL에 #이 붙은 채로 시작합니다.

codingapple.com/#/ 이게 메인페이지입니다. 

왜 # 이걸 붙이냐면 URL에서 # 뒤에 있는 내용들은 절대 서버로 전달되지 않아서 그렇습니다.

 

그래서 서버가 라우팅을 채가는 일을 방지할 수 있고

Vue router에게 온전히 라우팅을 맡길 수 있는 것입니다. 

그래서 님들이 서버가 없으면 # 붙는 hash 라우터로 사이트를 만드는 것도 좋은 선택입니다. 

 

2. Navigation guards

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

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

 

파라미터는 두세개 작명이 가능한데

첫 파라미터는 목적지 페이지, 

둘째 파라미터는 출발 페이지입니다. 

그리고 그것들은 $route라는 변수랑 똑같이 이용가능합니다.

to.fullPath하면 전체 경로를 알려주고

to.params.id 하면 id 파라미터를 알려주고 그렇습니다. 

 

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

 

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

 

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

beforeRouteEnter(){}
beforeRouteUpdate(){}

라는 것들을 lifecycle hook쓰는 위치에다가 쓰면 됩니다.

파라미터는 두개 입력가능한데 각각 목적지인 to, 출발지인 from을 의미합니다.

특정 페이지로 접속했을 때 ajax 요청하고 그럴 일이 있으면 저기다가 쓰시면 됩니다. 

 

 

더 자세한내용은 vue router 4버전 페이지를 참고합시다. 

https://next.router.vuejs.org/