[Vue.js] 14-2. 라우터 hash mode, Navigation guards

1. 라우터 hash mode

 

• 처음 세팅했던 라우터 코드

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

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

 

history: createWebHistory() - HTML5 mode

• 서버에 해당 페이지 요청함.
• 그래서 Vue가 라우팅 해주기 전에 서버가 해당 페이지를 보여주려고 함.
• 서버에 기능 구현이 안되어있으면 404가 뜰 수도 있음 -> 미리 서버에 Vue에서 라우팅 처리하게 맡겨두라고 기능 개발 해둬야함

 

history: createWebHashHistory() - Hash mode

• URL에 #이 붙음 ex) tistory.com/#
• # 뒤에 있는 내용들은 서버로 전달되지 않음
• 그래서 서버가 라우팅을 채가는 일을 방지할 수 있고 Vue에서 온전히 라우팅할 수 있음

 

 

 

2. Navigation guards

• 특정 URL로 접속할 때 특정 코드를 실행
• 네비게이션해주기 전에 실행되는 코드, 훅 같은 것

 

ex) /home 페이지로 이동 전 로그인하지 않은 상태면 /login 페이지로 이동

const routes = [
  {
    path: "/home",
    component: HelloWorld,
    beforeEnter: ()=>{
      if (isLogin == false) { // 로그인하지않았으면
        return '/login' // 로그인 페이지로 이동
      }
    }
  }
];

 

+ 파라미터

const routes = [
  {
    path: "/hello",
    component: HelloWorld,
    beforeEnter: (to, from)=>{ // 첫번째 파라미터: 도착 페이지 / 두번째 파라미터: 출발 페이지
      return to.fullPath // to.fullPath: 전체 경로 / to.params.id: id 파라미터
    } // return false: 라우팅 중단
  }
];

 

2.1. Vue 컴포넌트 안에서도 navigatrion guard 사용 가능

• lifecycle hook 사용 위치에 사용
• 특정 페이지로 접속했을 때 ajax 요청을 할 때 주로 사용

beforeRouteEnter(){}
beforeRouteUpdate(){}