Fix page routing

src/Spot.vue

@@ -12,73 +12,85 @@ const aoRoutes = {
 export default {
 	data() {
 		return {
-			hash: {},
+			hash: {page: '', items: []},
 			consts: this.spot.consts,
-			user: this.spot.vars('user')
+			user: this.spot.vars('user'),
+			routes: aoRoutes
 		};
 	},
 	provide() {
 		return {
+			hash: this.hash,
 			projects: this.spot.vars('projects'),
 			consts: this.consts,
 			user: this.user
 		};
 	},
-	inject: ['spot'],
 	computed: {
-		page() {
-			this.spot.vars('page', this.hash.page);
-			return aoRoutes[this.hash.page];
+		route() {
+			return this.routes[this.hash.page];
+		},
+		hashSnapshot() {
+			return JSON.stringify(this.hash);
 		}
 	},
+	inject: ['spot'],
 	created() {
 		//User
 		this.user.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone || this.consts.default_timezone;
+
+		//Set initial page
+		let asInitHash = this.getHash();
+		if(!asInitHash.page) this.hash.page = this.spot.consts.default_page;
+		else this.hash = asInitHash;
 	},
 	mounted() {
-		window.addEventListener('hashchange', () => {this.onHashChange();});
-		var oEvent = new Event('hashchange');
-		window.dispatchEvent(oEvent);
+		//Catch browser hash change
+		window.addEventListener('hashchange', this.onHashChange);
 	},
-	methods: {
-		_hash(hash, bReboot) {
-			bReboot = bReboot || false;
-			if(!hash) return window.location.hash.slice(1);
-			else window.location.hash = '#'+hash;
+	watch: {
+		hashSnapshot(jNewHash, jOldHash) {
+			const asNewHash = JSON.parse(jNewHash);
+			const asOldHash = JSON.parse(jOldHash);
+			this.spot.vars('page', this.hash.page); //FIXME remove
 
-			if(bReboot) location.reload();
-		},
-		onHashChange() {
-			let asHash = this.getHash();
-			if(asHash.hash !='' && asHash.page != '') {
-				if(asHash.page == this.hash.page) this.spot.onSamePageMove(asHash);
-				this.hash = asHash;
+			//Sync variable -> #hash
+			if(asNewHash != this.getHash()) {
+				this.setHash(asNewHash.page, asNewHash.items);
 			}
-			else if(!this.hash.page) this.setHash(this.spot.consts.default_page);
-		},
-		getHash() {
-			let sHash = this._hash();
-			let asHash = sHash.split(this.spot.consts.hash_sep);
-			let sPage = asHash.shift() || '';
-			return {hash:sHash, page:sPage, items:asHash};
-		},
-		setHash(sPage, asItems, bReboot) {
-			bReboot = bReboot || false;
-			sPage = sPage || '';
-			asItems = asItems || [];
-			if(typeof asItems == 'string') asItems = [asItems];
 
-			if(sPage != '') {
-				let sItems = (asItems.length > 0)?this.spot.consts.hash_sep+asItems.join(this.spot.consts.hash_sep):'';
-				this._hash(sPage+sItems, bReboot);
+			//Same Page change
+			if(asNewHash != asOldHash && asNewHash.page == asOldHash.page) {
+				this.spot.onSamePageMove(asNewHash, asOldHash);
 			}
 		}
+	},
+	methods: {
+		onHashChange() { //Sync #hash -> variable
+			let asHash = this.getHash();
+			if(asHash != this.hash) this.hash = asHash;
+			this.spot.vars('page', this.hash.page); //FIXME remove
+		},
+		getHash() {
+			let sHash = window.location.hash.slice(1);
+			let asHash = sHash.split(this.spot.consts.hash_sep);
+			let sPage = asHash.shift() || '';
+			return {page: sPage, items: asHash};
+		},
+		setHash(sPage = '', asItems = []) {
+			if(typeof asItems == 'string') asItems = [asItems];
+			const sItems = (asItems.length > 0)?(this.spot.consts.hash_sep + asItems.join(this.spot.consts.hash_sep)):'';
+			window.location.hash = '#' + sPage + sItems;
+		}
+	},
+	beforeUnmount() {
+		window.removeEventListener('hashchange', this.onHashChange)
 	}
 }
 </script>
 <template>
 	<div id="main">
-		<component :is="page" />
+		<component :is="route" />
 	</div>
 	<div id="mobile"></div>
-</template>
+</template>