1 files changed, 30 insertions, 7 deletions
diff --git a/app/assets/javascripts/environments/mount_show.js b/app/assets/javascripts/environments/mount_show.js
index ba816599ac2..afce2b7f237 100644
--- a/app/assets/javascripts/environments/mount_show.js
+++ b/app/assets/javascripts/environments/mount_show.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
+import VueRouter from 'vue-router';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import EnvironmentsDetailHeader from './components/environments_detail_header.vue';
 import { apolloProvider } from './graphql/client';
@@ -43,7 +44,7 @@ export const initHeader = () => {
           cancelAutoStopPath: dataset.environmentCancelAutoStopPath,
           terminalPath: dataset.environmentTerminalPath,
           metricsPath: dataset.environmentMetricsPath,
-          updatePath: dataset.tnvironmentEditPath,
+          updatePath: dataset.environmentEditPath,
         },
       });
     },
@@ -60,18 +61,40 @@ export const initPage = async () => {
   const dataSet = convertObjectPropsToCamelCase(JSON.parse(dataElement.dataset.details));
 
   Vue.use(VueApollo);
+  Vue.use(VueRouter);
   const el = document.getElementById('environment_details_page');
+
+  const router = new VueRouter({
+    mode: 'history',
+    base: window.location.pathname,
+    routes: [
+      {
+        path: '/',
+        name: 'environment_details',
+        component: EnvironmentsDetailPage,
+        props: (route) => ({
+          after: route.query.after,
+          before: route.query.before,
+          projectFullPath: dataSet.projectFullPath,
+          environmentName: dataSet.name,
+        }),
+      },
+    ],
+    scrollBehavior(to, from, savedPosition) {
+      if (savedPosition) {
+        return savedPosition;
+      }
+      return { top: 0 };
+    },
+  });
+
   return new Vue({
     el,
     apolloProvider: apolloProvider(),
+    router,
     provide: {},
     render(createElement) {
-      return createElement(EnvironmentsDetailPage, {
-        props: {
-          projectFullPath: dataSet.projectFullPath,
-          environmentName: dataSet.name,
-        },
-      });
+      return createElement('router-view');
     },
   });
 };