-
Hash mode vs HTML5 mode
history : createWebHistory() 라는 설정을 추가했는데
이게 문제가 되는 경우가 있다.
그럴때는 Web 대신 Hash를 써서 history: createWebHashHistory() 이렇게 설정해 놓을 수 있다.
이걸 사용하면 URL에 전부 #이 붙은 채로 시작된다.
https://velog.io/@daramjiyun/#/ 요런식 ~~
#을 붙이면 뒤에 있는 내용들은 절대 서버로 전달되지 않는다.
서버가 라우팅을 채가는 일을 방지할 수 있다는 것!
- Navigation guards
특정 URL로 접속할 때 코드를 실행하고 싶은 경우
( 마이페이지에 로그인한 사람만 들어갈 수 있게 하고싶을 때 )
Navigation guards 사용하면 된다.
ex) /mypage 라는 경로로 들어가기 전에 뭔가 검사를 해주고 싶으면 beforeEnter 라는 항목을 만들어주면 됨.
그리고 거긴 함수를 적어주면 됨.
실제 서비스라면 로그인한 사용자는 대부분 쿠키나 로컬스토리지에 로그인 정보가 저장되어있으니 그걸 검사하면 된다!
2-2. 파라미터
파라미터는 두세개 작명이 가능,
첫 파라미터는 목적지 페이지, 둘째 파라미터는 출발 페이지임.
$route라는 변수랑 똑같이 이용 가넝.
to.fullPath하면 전체경로 알려주고,
to.params.id하면 id파라미터를 알려주움.
-
여러개의 route에 같은 navigation guard를 추가하고 싶으면
router라는 변수에다가 .beforeEach() 이런거 쓰면 됨.
-
Vue 컴포넌트 안에서 navigation guard 가능
vue 파일 안에서도 페이지 이동시 뭔가 코드를 실행가능함.
created() mounted() 이런거랑 비슷하게 활용가능!
라는 것들을 lifecycle hook쓰는 위치에다가 쓰면 됨.
파라미터는 두개 입력가능한데 각각 목적지인 to, 출발지인 from을 의미함.
특정 페이지로 접속했을 때 ajax 요청하고 그럴 일이 있으면 저기다가 쓰시면 됨.
끗.
