1 files changed, 20 insertions, 0 deletions
diff --git a/app/assets/javascripts/repository/router.js b/app/assets/javascripts/repository/router.js
index ad6e32d7055..c7f7451fb55 100644
--- a/app/assets/javascripts/repository/router.js
+++ b/app/assets/javascripts/repository/router.js
@@ -2,6 +2,7 @@ import { escapeRegExp } from 'lodash';
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import { joinPaths } from '../lib/utils/url_utility';
+import BlobPage from './pages/blob.vue';
 import IndexPage from './pages/index.vue';
 import TreePage from './pages/tree.vue';
 
@@ -15,6 +16,13 @@ export default function createRouter(base, baseRef) {
     }),
   };
 
+  const blobPathRoute = {
+    component: BlobPage,
+    props: (route) => ({
+      path: route.params.path,
+    }),
+  };
+
   return new VueRouter({
     mode: 'history',
     base: joinPaths(gon.relative_url_root || '', base),
@@ -32,6 +40,18 @@ export default function createRouter(base, baseRef) {
         ...treePathRoute,
       },
       {
+        name: 'blobPathDecoded',
+        // Sometimes the ref needs decoding depending on how the backend sends it to us
+        path: `(/-)?/blob/${decodeURI(baseRef)}/:path*`,
+        ...blobPathRoute,
+      },
+      {
+        name: 'blobPath',
+        // Support without decoding as well just in case the ref doesn't need to be decoded
+        path: `(/-)?/blob/${escapeRegExp(baseRef)}/:path*`,
+        ...blobPathRoute,
+      },
+      {
         path: '/',
         name: 'projectRoot',
         component: IndexPage,