vue-router 없이 뒤로가기(Go back without vue-router)

vue-router

필자는 vue를 github.io 페이지에서 스태틱 페이지를 올리는데 사용하고 있다. github.io에서 vue-router를 이용하기 안좋은 점은 웹서버의 설정을 컨트롤 할수가 없어서 다이렉트 url을 사용할수가 없다는데 있다.

 

`/sub/#util1` 처럼 서브경로를 활용하기에 웹서버 설정이 필수라는것 같은데... github.io를 예제나 페이지 단위 별로 url을 이용할수 없다는게 마음에 들지 않아 ( 잘 찾다보면 우회할 방안이 있을지도 모르겠다. ) vue-router 사용할 생각을 접어버리고 popstate 이벤트를 통해 컨트롤 하도록 코딩을 했다. 아래 인덱스 파일을 참고하면 된다.

 

https://github.com/nhj7/nhj7.github.io/blob/master/index.html

nhj7/nhj7.github.io

1. 우선 router-view를 component로 변경한다. 

<component :is="currentView"></component>

2. vue 스크립트 내 components를 정의한다.

var app = new Vue({
	'el' : '#app'
	, router
	, data:{
		currentView : Home
	}
	, components : {
		'KakaoLink' : httpVueLoader('./poc/KakaoLink.vue?v='+updateVersion)
		, 'Home' : httpVueLoader('./Home.vue?v='+updateVersion)
		 , 'Tesseract' : httpVueLoader('./poc/Tesseract.vue?v='+updateVersion)
		
	}

3. setInitView 함수를 만들어주어 다이렉트 주소를 사용할수 있게 했다. 

setInitView(){
	console.log(this.$route) // outputs 'yay'
	if( this.$route.hash != "" ){
		var vueName = this.$route.hash.substring(2);
		this.$data.currentView = vueName;
		$(".nav").find(".active").toggleClass("active");
		$("#"+vueName).toggleClass("active");
	}else{
		this.$data.currentView = "Home";
	}
	$("#navbar li").each(
		function(idx, val){
			//console.log(idx, val);
			$(val).on("click",
				function(){
					app.setCurrentView(val);
				}
			);
		}
	);
}

4. 뒤로가기나 앞으로가기에 대응할수 있게 onpopstate 이벤트를 인지하여 이동된 url을 보고 주소를 이동해준다.

 

,created: function() {
	window.onpopstate = function(event) {
		console.log(app.$route, window.history, "location: " + document.location + ", state: " + JSON.stringify(event.state));
		app.setInitView();
	};
}

이런식으로 하면 vue-router 없이 이동도 잘 되고 다이렉트 url도 잘 된다.