Merge branch 'ph/fixSlashAndHashVueRouter' into 'master'

Correctly handle slash and hash in tree URL

See merge request gitlab-org/gitlab!29027

app/assets/javascripts/repository/router.js

@@ -12,7 +12,7 @@ export default function createRouter(base, baseRef) {
     base: joinPaths(gon.relative_url_root || '', base),
     routes: [
       {
-        path: `(/-)?/tree/(${encodeURIComponent(baseRef)}|${baseRef})/:path*`,
+        path: `(/-)?/tree/(${encodeURIComponent(baseRef).replace(/%2F/g, '/')}|${baseRef})/:path*`,
         name: 'treePath',
         component: TreePage,
         props: route => ({

spec/frontend/repository/router_spec.js

@@ -4,14 +4,15 @@ import createRouter from '~/repository/router';
 
 describe('Repository router spec', () => {
   it.each`
-    path                           | component    | componentName
-    ${'/'}                         | ${IndexPage} | ${'IndexPage'}
-    ${'/tree/master'}              | ${TreePage}  | ${'TreePage'}
-    ${'/-/tree/master'}            | ${TreePage}  | ${'TreePage'}
-    ${'/-/tree/master/app/assets'} | ${TreePage}  | ${'TreePage'}
-    ${'/-/tree/123/app/assets'}    | ${null}      | ${'null'}
-  `('sets component as $componentName for path "$path"', ({ path, component }) => {
-    const router = createRouter('', 'master');
+    path                                     | branch              | component    | componentName
+    ${'/'}                                   | ${'master'}         | ${IndexPage} | ${'IndexPage'}
+    ${'/tree/master'}                        | ${'master'}         | ${TreePage}  | ${'TreePage'}
+    ${'/-/tree/master'}                      | ${'master'}         | ${TreePage}  | ${'TreePage'}
+    ${'/-/tree/master/app/assets'}           | ${'master'}         | ${TreePage}  | ${'TreePage'}
+    ${'/-/tree/feature/test-%23/app/assets'} | ${'feature/test-#'} | ${TreePage}  | ${'TreePage'}
+    ${'/-/tree/123/app/assets'}              | ${'master'}         | ${null}      | ${'null'}
+  `('sets component as $componentName for path "$path"', ({ path, component, branch }) => {
+    const router = createRouter('', branch);
 
     const componentsForRoute = router.getMatchedComponents(path);