Sangil's blog

페이징 되어 있는 웹페이지에서 1번 2번 3번으로 이동하고 뒤로가기를 하면 3번에서 2번으로 이동해야 되는데, 그 전화면으로 이동되는 경우가 있다.

Vue에서는 뒤로가기를 하면, 페이징된 페이지 번호로 가는게 아니라, 화면이 전환되어버린다.
그래서 해쉬태그를 이용하여 페이징된 번호를 #1, #2, #3식으로 url을 변경해주어 뒤로가기 했을때, 해쉬태그가 포함된 페이지로 이동하게 해주었다. 아래 catch 부분을 처리하지 않으면, 같은 페이지를 호출한다고 계속 오류가난다.(뷰입장에서는 해쉬태그를 제외하고 같은 페이지로 인식하나보다)

this.$router.push(this.$route.path +"#"+ skip).catch(error=>{});

그리고 뒤로가기 했을때 URL 변경을 WATCH에서캐치하고 해당 해쉬태그를 가져와서 페이징된 페이지를 다시 가져오게 만들면 해결!

watch:{
	//해당 라우트에서 주소가 바꼈을시 호출됨
	'$route' (to, from) {
		console.log(to.hash);
	}
}