7. vue router - 3

• Hash mode
  • uri가 #이 붙은 상태로 시작한다.
    • kade.com/#/home
  • #뒤에 있는 내용이 서버로 전달되지 않고 그렇기때문에 uri가 변했을때 서버가 아닌 vue의 router가 안전하게 읽어올 수 있다는 장점이 있다.

  • import { createRouter, createWebHashHistory } from 'vue-router'
    
    const router = [];
    const router = createRouter({
      history: createWebHashHistory(),
      routes,
    })

    • history : createWebHashHistory()
• HTML5 mode
  • 흔히 보이는 구조이다 
    • kade.com/home
  • vue를 이렇게 구성할 경우 서버가 /home의 요청을 가져가서 처리할수도 있기 때문에 서버가 있다면 hash mode를 쓰거나 ~~uri로 들어왔을때 어떻게 처리해라라고 서버에서 따로 한번 처리를 해줘야 할 수도 있다.

  • import { createRouter, createWebHistory } from 'vue-router'
    
    const router = [];
    const router = createRouter({
      history: createWebHistory(),
      routes,
    })

    • history : createWebHistory()
• Navigation guards
  • router를 등록하면서 beforeEnter속성을 추가해주면 해당 페이지로 이동하기 전 어떤 코드를 실행해 줄 수 있다.
    • ex) 로그인을 하지 않을 상태에서 마이페이지 접근

  • const routes = [
    	{
        	path: '/mypage',
            component: MyPage,
            beforeEnter: (목적지, 출발 페이지) => {
            	// code...
                // to.fullPath -> 전체 경로
                // to.params.id -> id파라미터 값
                // return 값 : false 라우팅 중단
    			// return이 없는경우 라우팅 페이지로 간다.
            }
        }
    ]

     
  • https://next.router.vuejs.org/ 참고