3 files changed, 82 insertions, 0 deletions
diff --git a/app/assets/javascripts/design_management_legacy/router/constants.js b/app/assets/javascripts/design_management_legacy/router/constants.js
new file mode 100644
index 00000000000..abeef520e33
--- /dev/null
+++ b/app/assets/javascripts/design_management_legacy/router/constants.js
@@ -0,0 +1,3 @@
+export const ROOT_ROUTE_NAME = 'root';
+export const DESIGNS_ROUTE_NAME = 'designs';
+export const DESIGN_ROUTE_NAME = 'design';
diff --git a/app/assets/javascripts/design_management_legacy/router/index.js b/app/assets/javascripts/design_management_legacy/router/index.js
new file mode 100644
index 00000000000..28a81ed0278
--- /dev/null
+++ b/app/assets/javascripts/design_management_legacy/router/index.js
@@ -0,0 +1,35 @@
+import $ from 'jquery';
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import routes from './routes';
+import { DESIGN_ROUTE_NAME } from './constants';
+import { getPageLayoutElement } from '~/design_management_legacy/utils/design_management_utils';
+import { DESIGN_DETAIL_LAYOUT_CLASSLIST } from '../constants';
+
+Vue.use(VueRouter);
+
+export default function createRouter(base) {
+  const router = new VueRouter({
+    base,
+    mode: 'history',
+    routes,
+  });
+  const pageEl = getPageLayoutElement();
+
+  router.beforeEach(({ meta: { el }, name }, _, next) => {
+    $(`#${el}`).tab('show');
+
+    // apply a fullscreen layout style in Design View (a.k.a design detail)
+    if (pageEl) {
+      if (name === DESIGN_ROUTE_NAME) {
+        pageEl.classList.add(...DESIGN_DETAIL_LAYOUT_CLASSLIST);
+      } else {
+        pageEl.classList.remove(...DESIGN_DETAIL_LAYOUT_CLASSLIST);
+      }
+    }
+
+    next();
+  });
+
+  return router;
+}
diff --git a/app/assets/javascripts/design_management_legacy/router/routes.js b/app/assets/javascripts/design_management_legacy/router/routes.js
new file mode 100644
index 00000000000..788910e5514
--- /dev/null
+++ b/app/assets/javascripts/design_management_legacy/router/routes.js
@@ -0,0 +1,44 @@
+import Home from '../pages/index.vue';
+import DesignDetail from '../pages/design/index.vue';
+import { ROOT_ROUTE_NAME, DESIGNS_ROUTE_NAME, DESIGN_ROUTE_NAME } from './constants';
+
+export default [
+  {
+    name: ROOT_ROUTE_NAME,
+    path: '/',
+    component: Home,
+    meta: {
+      el: 'discussion',
+    },
+  },
+  {
+    name: DESIGNS_ROUTE_NAME,
+    path: '/designs',
+    component: Home,
+    meta: {
+      el: 'designs',
+    },
+    children: [
+      {
+        name: DESIGN_ROUTE_NAME,
+        path: ':id',
+        component: DesignDetail,
+        meta: {
+          el: 'designs',
+        },
+        beforeEnter(
+          {
+            params: { id },
+          },
+          from,
+          next,
+        ) {
+          if (typeof id === 'string') {
+            next();
+          }
+        },
+        props: ({ params: { id } }) => ({ id }),
+      },
+    ],
+  },
+];