라우터 나머지 기능

route 초기설정 때

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

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

이렇게 설정을 했는데, history: createWebHistory() 이게 문제가 되는 경우가 있다.

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

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

이처럼 설정하는건 Hash mode라고 하는데, 이걸 선택하면 URL에 전부 #이 붙은 채로 시작한다. codingapple.com/#/detail 이런 식이라고 한다.

여기서 #의 장점은 # 뒤에 있는 내용들은 절대 서버로 전달되지 않기에 서버에 아무 기능을 개발 안해도 404가 뜨지 않는다는 것이다. 그래서 서버가 라우팅을 채가는 일을 방지할 수 있다.

 

또, Navigation Guards라는게 있다. 특정 URL로 접속할 때, 뭔가 코드를 실행하고 싶을 때 사용하는데, 예를 들면, /hello 라는 경로로 들어가기 전에 뭔가 검사를 해주고 싶으면 beforeEnter라는 항목을 만들어주면 된다.

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

이런 식으로 /hello라는 경로로 들어가면, HelloWorld라는 컴포넌트를 보여주는데, 만약, 로그인했냐라는 변수가 false면 /login경로로 보내버리는 것이다.

beforeEnter에는 첫 파라미터로 목적지 페이지, 둘째 파라미터로 출발 페이지를 입력가능한데,

beforeEnter(to, form) => {}에서 return으로 to.fullpath하면 전체경로를 알려주고, to.params.id하면 id파라미터를 알려준다.

그리고, return false하면 라우팅 중단, return 값이 없으면 /hello경로로 이동시켜준다.

 

만약, 여러개의 route에 같은 navigation guard를 추가하고 싶으면,

const router = createRouter({
  history: createWebHistory(),
  routes,
});
router.beforeEach((to, from) => {
  //페이지 변경 전에 실행할 코드
});

 

이렇게 작성해준다.