Fix routing

Sabine-Schoenau · Jan 4, 2021 · aee76d7 · aee76d7
1 parent c0b3b0d
commit aee76d7
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 24 deletions.
diff --git a/src/components/Nav.vue b/src/components/Nav.vue
@@ -1,6 +1,6 @@
 <template>
   <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
-    <NavLink class="navbar-brand" href="/">rdmo-terms</NavLink>
+    <NavLink class="navbar-brand" href="">rdmo-terms</NavLink>
 
     <button class="navbar-toggler" type="button"
             data-toggle="collapse" data-target="#navbarContent"
@@ -11,22 +11,22 @@
     <div class="collapse navbar-collapse" id="navbarContent">
       <ul class="navbar-nav">
         <li class="nav-item">
-          <NavLink class="nav-link" href="/questions">Questions</NavLink>
+          <NavLink class="nav-link" href="questions">Questions</NavLink>
         </li>
         <li class="nav-item">
-          <NavLink class="nav-link" href="/domain">Domain</NavLink>
+          <NavLink class="nav-link" href="domain">Domain</NavLink>
         </li>
         <li class="nav-item">
-          <NavLink class="nav-link" href="/options">Options</NavLink>
+          <NavLink class="nav-link" href="options">Options</NavLink>
         </li>
         <li class="nav-item">
-          <NavLink class="nav-link" href="/conditions">Conditions</NavLink>
+          <NavLink class="nav-link" href="conditions">Conditions</NavLink>
         </li>
         <li class="nav-item">
-          <NavLink class="nav-link" href="/tasks">Tasks</NavLink>
+          <NavLink class="nav-link" href="tasks">Tasks</NavLink>
         </li>
         <li class="nav-item">
-          <NavLink class="nav-link" href="/views">Views</NavLink>
+          <NavLink class="nav-link" href="views">Views</NavLink>
         </li>
       </ul>
     </div>

diff --git a/src/components/NavLink.vue b/src/components/NavLink.vue
@@ -17,7 +17,7 @@
     methods: {
       go (event) {
         event.preventDefault()
-        this.$root.route = this.href
+        this.$root.pathname = this.href
         window.history.pushState(
           null,
           routes[this.href],

diff --git a/src/main.js b/src/main.js
@@ -9,7 +9,6 @@ import Home from './pages/Home'
 import Main from './pages/Main'
 import NotFound from './pages/NotFound'
 
-
 Vue.mixin({
   methods: {
     capitalize (string) {
@@ -21,11 +20,18 @@ Vue.mixin({
 new Vue({
   el: '#app',
   data: {
-    route: window.location.pathname
+    pathname: window.location.pathname
   },
   computed: {
+    route () {
+      if (Vue.config.devtools) {
+        return this.pathname.replace(/^(\/)/, '')
+      } else {
+        return this.pathname.replace(/^(\/terms\/)/, '')
+      }
+    },
     ViewComponent () {
-      if (this.route == '/') {
+      if (this.route == '') {
         return Home
       } else if (Object.keys(routes).includes(this.route)) {
         return Main

diff --git a/src/pages/Home.vue b/src/pages/Home.vue
@@ -24,7 +24,7 @@
             </ul>
           </div>
           <div class="card-footer">
-            <NavLink href="/questions">Go to questions</NavLink>
+            <NavLink href="./questions">Go to questions</NavLink>
           </div>
         </div>
 
@@ -39,7 +39,7 @@
             </ul>
           </div>
           <div class="card-footer">
-            <NavLink href="/domain">Go to domain</NavLink>
+            <NavLink href="./domain">Go to domain</NavLink>
           </div>
         </div>
 
@@ -55,7 +55,7 @@
             </ul>
           </div>
           <div class="card-footer">
-            <NavLink href="/domain">Go to domain</NavLink>
+            <NavLink href="./domain">Go to domain</NavLink>
           </div>
         </div>
 
@@ -70,7 +70,7 @@
             </ul>
           </div>
           <div class="card-footer">
-            <NavLink href="/questions">Go to conditions</NavLink>
+            <NavLink href="./questions">Go to conditions</NavLink>
           </div>
         </div>
 
@@ -85,7 +85,7 @@
             </ul>
           </div>
           <div class="card-footer">
-            <NavLink href="/tasks">Go to tasks</NavLink>
+            <NavLink href="./tasks">Go to tasks</NavLink>
           </div>
         </div>
 
@@ -100,7 +100,7 @@
             </ul>
           </div>
           <div class="card-footer">
-            <NavLink href="/views">Go to views</NavLink>
+            <NavLink href="./views">Go to views</NavLink>
           </div>
         </div>
       </div>

diff --git a/src/routes.js b/src/routes.js
@@ -6,42 +6,42 @@ import views from './data/views.json'
 import tasks from './data/tasks.json'
 
 export default {
-  '/': {},
-  '/questions': {
+  '': {},
+  'questions': {
     title: 'Questions',
     keys: ['uri_prefix', 'comment',
            'title_en', 'title_de', 'title_fr',
            'text_en', 'text_de', 'text_fr'],
     filterKeys: ['uri', 'comment'],
     elements: questions
   },
-  '/domain': {
+  'domain': {
     title: 'Domain',
     keys: ['uri_prefix', 'comment',
            'parent'],
     filterKeys: ['uri'],
     elements: domain
   },
-  '/options': {
+  'options': {
     title: 'Options',
     keys: ['uri_prefix', 'comment', 'text_en', 'text_de', 'text_fr'],
     filterKeys: ['uri', 'comment', 'text_en', 'text_de', 'text_fr'],
     elements: options
   },
-  '/conditions': {
+  'conditions': {
     title: 'Conditions',
     keys: ['uri_prefix', 'comment'],
     filterKeys: ['uri'],
     elements: conditions
   },
-  '/tasks': {
+  'tasks': {
     title: 'Tasks',
     keys: ['uri_prefix', 'comment',
            'text_en', 'text_de', 'text_fr'],
     filterKeys: ['uri'],
     elements: tasks
   },
-  '/views': {
+  'views': {
     title: 'Views',
     keys: ['uri_prefix', 'comment',
            'title_en', 'title_de', 'title_fr'],

diff --git a/vue.config.js b/vue.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  publicPath: process.env.NODE_ENV === 'production' ? '/terms/' : '/'
+}