diff --git a/frappe/core/page/recorder/recorder.js b/frappe/core/page/recorder/recorder.js
index 4d6d6aa84c..b75ea6a41c 100644
--- a/frappe/core/page/recorder/recorder.js
+++ b/frappe/core/page/recorder/recorder.js
@@ -22,6 +22,7 @@ class Recorder {
 	}
 
 	show() {
-
+		if (!this.view || this.view.$route.name == "recorder-detail") return;
+		this.view.$router.replace({name: "recorder-detail"});
 	}
 }
diff --git a/frappe/public/js/frappe/recorder/RecorderRoot.vue b/frappe/public/js/frappe/recorder/RecorderRoot.vue
index 0877acc463..479ab1b2ca 100644
--- a/frappe/public/js/frappe/recorder/RecorderRoot.vue
+++ b/frappe/public/js/frappe/recorder/RecorderRoot.vue
@@ -7,8 +7,11 @@
 <script>
 export default {
 	name: "RecorderRoot",
-	created() {
-		this.$router.push({name: 'recorder-detail'});
-	},
+	watch: {
+		$route() {
+			frappe.router.current_route = frappe.router.parse();
+			frappe.breadcrumbs.update();
+		}
+	}
 };
 </script>
diff --git a/frappe/public/js/frappe/recorder/RequestDetail.vue b/frappe/public/js/frappe/recorder/RequestDetail.vue
index ac349d7937..cc056686d5 100644
--- a/frappe/public/js/frappe/recorder/RequestDetail.vue
+++ b/frappe/public/js/frappe/recorder/RequestDetail.vue
@@ -284,7 +284,7 @@ export default {
 		frappe.breadcrumbs.add({
 			type: 'Custom',
 			label: __('Recorder'),
-			route: '#recorder'
+			route: '/app/recorder'
 		});
 		frappe.call({
 			method: "frappe.recorder.get",
diff --git a/frappe/public/js/frappe/recorder/recorder.js b/frappe/public/js/frappe/recorder/recorder.js
index f3a33e6a8f..c80fad62f6 100644
--- a/frappe/public/js/frappe/recorder/recorder.js
+++ b/frappe/public/js/frappe/recorder/recorder.js
@@ -18,6 +18,12 @@ const routes = [
 		path: '/request/:id',
 		component: RequestDetail,
 	},
+	{
+		path: '/',
+		redirect: {
+			name: "recorder-detail"
+		}
+	}
 ];
 
 const router = new VueRouter({
@@ -26,11 +32,11 @@ const router = new VueRouter({
 	routes: routes,
 });
 
-new Vue({
+frappe.recorder.view = new Vue({
 	el: ".recorder-container",
 	router: router,
 	data: {
-		page: cur_page.page.page
+		page: frappe.pages["recorder"].page
 	},
 	template: "<recorder-root/>",
 	components: {