refactor(recorder): Use vue-router

frappe/public/js/frappe/recorder/RecorderDetail.vue

@@ -12,7 +12,7 @@
 		<tbody>
 			<tr v-for="request in requests" :key="request.uuid" v-bind="request">
 				<td>
-					<a :href="'#Request/' + request.uuid ">{{ request.uuid }}</a>
+					<router-link :to="{name: 'request-detail', params: {request_uuid: request.uuid}} ">{{ request.uuid }}</router-link>
 				</td>
 				<td>
 					{{ request.path }}

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

@@ -1,50 +1,11 @@
 <template>
 	<div>
-		<component :is="current_component"/>
+		<router-view/>
 	</div>
 </template>
 
 <script>
-import Vue from 'vue/dist/vue.js'
-Vue.prototype.$route = { param: null }
-
-import RecorderDetail from "./RecorderDetail.vue"
-import RequestDetail from "./RequestDetail.vue"
-
 export default {
 	name: "RecorderRoot",
-	data () {
-		return {
-			current_component: RecorderDetail
-		}
-	},
-	mounted () {
-		this.set_component()
-		window.onhashchange = this.set_component
-	},
-	methods: {
-		set_component: function () {
-			var routes = {
-				"#": RecorderDetail,
-				"#Request": RequestDetail,
-			}
-			var route = this.get_route()
-			this.$route.param = route.param
-			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>

frappe/public/js/frappe/recorder/RequestDetail.vue

@@ -34,7 +34,7 @@ export default {
 		frappe.call({
 			method: "frappe.www.recorder.get_request_data",
 			args: {
-				uuid: this.$route.param
+				uuid: this.$route.params.request_uuid
 			}
 		}).then( r => {
 			this.calls = r.message.calls

frappe/public/js/frappe/recorder/recorder.js

@@ -1,9 +1,35 @@
 import Vue from 'vue/dist/vue.js'
+import VueRouter from 'vue-router/dist/vue-router.js'
+
 import RecorderRoot from "./RecorderRoot.vue"
 
+import RecorderDetail from "./RecorderDetail.vue"
+import RequestDetail from "./RequestDetail.vue"
+
 frappe.ready(function() {
+	Vue.use(VueRouter)
+	const routes = [
+		{
+			name: "recorder-detail",
+			path: '/',
+			component: RecorderDetail,
+		},
+		{
+			name: "request-detail",
+			path: '/request/:request_uuid',
+			component: RequestDetail,
+		},
+	  ]
+
+	const router = new VueRouter({
+		mode: 'history',
+		base: "/recorder",
+		routes: routes,
+	})
+
 	new Vue({
 		el: "#recorder",
+		router: router,
 		template: "<recorder-root/>",
 		components: {
 			RecorderRoot,

package.json

@@ -35,7 +35,8 @@
     "socket.io": "^2.0.4",
     "superagent": "^3.8.2",
     "touch": "^3.1.0",
-    "vue": "^2.5.17"
+    "vue": "^2.5.17",
+    "vue-router": "^2.0.0"
   },
   "devDependencies": {
     "babel-runtime": "^6.26.0",

yarn.lock

@@ -4572,6 +4572,11 @@ vlq@^1.0.0:
   resolved "https://registry.yarnpkg.com/vlq/-/vlq-1.0.0.tgz#8101be90843422954c2b13eb27f2f3122bdcc806"
   integrity sha512-o3WmXySo+oI5thgqr7Qy8uBkT/v9Zr+sRyrh1lr8aWPUkgDWdWt4Nae2WKBrLsocgE8BuWWD0jLc+VW8LeU+2g==
 
+vue-router@^2.0.0:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-2.8.1.tgz#9833c9ee57ac83beb0269056fefee71713f20695"
+  integrity sha512-MC4jacHBhTPKtmcfzvaj2N7g6jgJ/Z/eIjZdt+yUaUOM1iKC0OUIlO/xCtz6OZFFTNUJs/1YNro2GN/lE+nOXA==
+
 vue-template-compiler@^2.5.17:
   version "2.5.17"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.17.tgz#52a4a078c327deb937482a509ae85c06f346c3cb"