refactor(recorder): Render components dynamically based on hash

frappe/public/js/frappe/recorder/PathListItem.vue

@@ -1,7 +1,9 @@
 <template>
-	<div>
-		{{ path }} {{ count }}
-	</div>
+	<a :href="'#Path/' + path ">
+		<div>
+			{{ path }} {{ count }}
+		</div>
+	</a>
 </template>
 
 <script>

frappe/public/js/frappe/recorder/RecorderRoot.vue

@@ -1,15 +1,47 @@
 <template>
 	<div>
-		<recorder-detail/>
+		<component :is="current_component"/>
 	</div>
 </template>
 
 <script>
+
 import RecorderDetail from "./RecorderDetail.vue"
+import PathDetail from "./PathDetail.vue"
+
 export default {
 	name: "RecorderRoot",
-	components: {
-		RecorderDetail,
-	}
+	data () {
+		return {
+			current_component: RecorderDetail
+		}
+	},
+	mounted () {
+		this.set_component()
+		window.onhashchange = this.set_component
+	},
+	methods: {
+		set_component: function () {
+			var routes = {
+				"#": RecorderDetail,
+				"#Path": PathDetail,
+			}
+			var route = this.get_route()
+			this.current_component = routes[route.route]
+		},
+		get_route: function () {
+			var hash = window.location.hash
+			if (hash) {
+				var array = hash.split("/")
+				var route = array[0]
+				var param = array.slice(1).join("/")
+			}
+			else {
+				var route = "#"
+				var param = ""
+			}
+			return { route, param }
+		},
+	},
 };
 </script>