fix: update uri paths

src/App.vue

@@ -30,13 +30,13 @@ export default Vue.extend({
   watch: {
     '$route.params.tab': {
       handler () {
-        if (this.$route.params.tab === 'settings') {
+        if (this.$route.path === '/settings') {
           return
         }
         const tabNumber = Number(this.$route.params.tab)
         const isValidTabNumber = tabNumber >= 1 && tabNumber <= this.$store.state.tabs.length
         if (!isValidTabNumber) {
-          this.$router.push(`/1/${this.$store.state.tabs[0].path}`)
+          this.$router.push(`/timetables/1/${this.$store.state.tabs[0].path}`)
         }
       },
       deep: true,
@@ -59,15 +59,15 @@ export default Vue.extend({
     },
     '$store.state.tabs': {
       handler () {
-        if (this.$route.params.tab === 'settings') {
+        if (this.$route.path === '/settings') {
           return
         }
         const tabNumber = Number(this.$route.params.tab)
         const isValidTabNumber = tabNumber >= 1 && tabNumber <= this.$store.state.tabs.length
         if (!isValidTabNumber) {
           const newTabNumber = Math.min(this.$store.state.tabs.length, Math.max(1, Number(this.$route.params.tab)))
           const { line, stop } = this.$store.state.tabs[newTabNumber - 1]
-          this.$router.push(`/${newTabNumber}${line ? `/${line}` : ''}${stop ? `/${stop}` : ''}`)
+          this.$router.push(`/timetables/${newTabNumber}${line ? `/${line}` : ''}${stop ? `/${stop}` : ''}`)
         }
       },
       deep: true,

src/components/AppHeader.vue

@@ -3,13 +3,13 @@
     <div>
       <router-link v-if="$route.params.line"
         class="icon-line"
-        :to="`/${ $route.params.tab }/${ $route.params.line }`"
+        :to="`/timetables/${ $route.params.tab }/${ $route.params.line }`"
       >
       <LineIcon :lineSlugName="$route.params.line" theme="colors" />
       </router-link>
     </div>
     <div>
-      <router-link class="logo" :to="`/${ $route.params.tab }`">
+      <router-link class="logo" :to="`/timetables/${ $route.params.tab }`">
         <img alt="Logo Alednavigo" src="@/assets/icon-light.png" />
       </router-link>
     </div>

src/components/AppNav.vue

@@ -8,7 +8,7 @@
             class="tab"
             :class="{ 'tab-active': tabIndex() === i }"
           >
-            <router-link class="tab-link" :to="`/${i + 1}/${path}`">
+            <router-link class="tab-link" :to="`/timetables/${i + 1}/${path}`">
               <span class="tab-label">
                 <LineIcon :lineSlugName="line" :theme="tabIndex() === i ? 'dark' : 'light'" />
                 <span v-if="stop" class="tab-label-text">
@@ -36,7 +36,7 @@
               class="tab"
               :class="{ 'tab-active': tabIndex() === i }"
             >
-              <router-link class="tab-link" :to="`/${i + 1}/${path}`">
+              <router-link class="tab-link" :to="`/timetables/${i + 1}/${path}`">
                 <span class="tab-label">
                   <LineIcon :lineSlugName="line" :theme="tabIndex() === i ? 'dark' : 'light'" />
                   <span v-if="stop" class="tab-label-text">
@@ -76,18 +76,18 @@ export default Vue.extend({
     },
     addTab () {
       this.$store.commit('addTab')
-      this.$router.push(`/${this.$store.state.tabs.length}`)
+      this.$router.push(`/timetables/${this.$store.state.tabs.length}`)
     },
     closeTab (tabIndex: number) {
       const currentTabIndex = Number(this.$route.params.tab) - 1
       if (currentTabIndex > tabIndex) {
         const { line, stop } = this.$store.state.tabs[currentTabIndex]
         this.$store.commit('closeTab', { tabIndex })
-        this.$router.push(`/${currentTabIndex}${line ? `/${line}` : ''}${stop ? `/${stop}` : ''}`)
+        this.$router.push(`/timetables/${currentTabIndex}${line ? `/${line}` : ''}${stop ? `/${stop}` : ''}`)
       } else {
         this.$store.commit('closeTab', { tabIndex })
         const { line, stop } = this.$store.state.tabs[currentTabIndex]
-        this.$router.push(`/${currentTabIndex + 1}${line ? `/${line}` : ''}${stop ? `/${stop}` : ''}`)
+        this.$router.push(`/timetables/${currentTabIndex + 1}${line ? `/${line}` : ''}${stop ? `/${stop}` : ''}`)
       }
     },
   },

src/components/AppPageView.vue

@@ -1,25 +1,21 @@
 <template>
   <div>
     <div class="tab">
-      <SettingsPage v-if="$route.params.tab === 'settings'" />
-      <TabPage v-else />
+      <router-view>
+      </router-view>
     </div>
     <AppNav />
   </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
-import SettingsPage from '@/pages/SettingsPage.vue'
-import TabPage from '@/pages/TabPage/index.vue'
 import AppNav from '@/components/AppNav.vue'
 
 export default Vue.extend({
   name: 'AppPageView',
   components: {
     AppNav,
-    SettingsPage,
-    TabPage,
   },
 })
 </script>

src/components/Line/RouteMap/Table.vue

@@ -12,7 +12,7 @@
       >
         <LabelCell
           :stopName="row.displayName"
-          :href="`/${$route.params.tab}/${line}/${row.slugName}`"
+          :href="`/timetables/${$route.params.tab}/${line}/${row.slugName}`"
           :lineConnections="row.lineConnections"
         />
       </td>

src/components/Stop/Header.vue

@@ -6,7 +6,7 @@
     <span class="line-connections">
       <router-link v-for="conn in stop.lineConnections"
         :key="`${conn.line}/${conn.slugName}`"
-        :to="`/${$route.params.tab}/${conn.line}/${conn.slugName}`"
+        :to="`/timetables/${$route.params.tab}/${conn.line}/${conn.slugName}`"
       >
         <LineIcon :lineSlugName="conn.line" theme="dark" />
       </router-link>

src/components/Stop/PrevNextStops.vue

@@ -2,7 +2,7 @@
   <div class="prev-next-stops">
     <ul>
       <li v-for="(prevStop, i) in stop.prevStops.slice().reverse()" :key="i" class="prev-stops">
-        <router-link :to="`/${$route.params.tab}/${$route.params.line}/${prevStop}`">
+        <router-link :to="`/timetables/${$route.params.tab}/${$route.params.line}/${prevStop}`">
           <span>
             {{ getStop($route.params.line, prevStop).displayName }}
           </span>
@@ -11,7 +11,7 @@
     </ul>
     <ul>
       <li v-for="(nextStop, i) in stop.nextStops.slice().reverse()" :key="i" class="next-stops">
-        <router-link :to="`/${$route.params.tab}/${$route.params.line}/${nextStop}`">
+        <router-link :to="`/timetables/${$route.params.tab}/${$route.params.line}/${nextStop}`">
           <span>
             {{ getStop($route.params.line, nextStop).displayName }}
           </span>

src/main.ts

@@ -4,17 +4,20 @@ import Vuex from 'vuex'
 import VuexPersistence from 'vuex-persist'
 import './registerServiceWorker'
 import App from './App.vue'
+import TabPage from '@/pages/TabPage/index.vue'
+import SettingsPage from '@/pages/SettingsPage.vue'
 
 Vue.config.productionTip = false
 Vue.use(VueRouter)
 Vue.use(Vuex)
 
 const routes = [
   { path: '/', component: App },
-  { path: '/:tab', component: App },
-  { path: '/:tab/:line', component: App },
-  { path: '/:tab/:line/:stop', component: App },
-  { path: '/about', component: App },
+  { path: '/settings', component: SettingsPage },
+  { path: '/timetables/', component: TabPage },
+  { path: '/timetables/:tab', component: TabPage },
+  { path: '/timetables/:tab/:line', component: TabPage },
+  { path: '/timetables/:tab/:line/:stop', component: TabPage },
 ]
 
 const router = new VueRouter({
@@ -56,5 +59,5 @@ const store = new Vuex.Store({
 new Vue({
   router,
   store,
-  template: '<router-view class="view"></router-view>',
+  render: h => h(App),
 }).$mount('#app')

src/pages/TabPage/New.vue

@@ -4,7 +4,7 @@
       <h2>{{ category.name }}</h2>
       <hr />
       <router-link v-for="line in category.lines" :key="line.slugName"
-        class="icon-line" :to="`/${$route.params.tab}/${line.slugName}`"
+        class="icon-line" :to="`/timetables/${$route.params.tab}/${line.slugName}`"
       >
         <LineIcon :lineSlugName="line.slugName" theme="dark" fadeIn />
       </router-link>