[router] Add tabs persistance

Author: ludchieng

package-lock.json

@@ -12,7 +12,8 @@
     "core-js": "^3.8.3",
     "register-service-worker": "^1.7.2",
     "vue": "^2.6.14",
-    "vuex": "^3.6.2"
+    "vuex": "^3.6.2",
+    "vuex-persist": "^3.1.3"
   },
   "devDependencies": {
     "@fontsource/inter": "^4.5.11",

package.json

@@ -35,20 +35,23 @@ export default Vue.extend({
         const tabNumber = Number(this.$route.params.tab)
         const isValidTabNumber = tabNumber >= 1 && tabNumber <= this.$store.state.tabs.length
         if (!isValidTabNumber) {
-          this.$router.push('/1')
+          this.$router.push(`/1/${this.$store.state.tabs[0].path}`)
         }
       },
       deep: true,
       immediate: true,
     },
     '$route.path': {
       handler () {
+        const tabNumber = Number(this.$route.params.tab)
         const line = this.$route.params.line
         const stop = this.$route.params.stop
-        this.$store.commit('setTab', {
-          idx: Number(this.$route.params.tab) - 1,
-          tab: { line, stop },
-        })
+        if (tabNumber && !isNaN(tabNumber)) {
+          this.$store.commit('setTab', {
+            idx: tabNumber - 1,
+            tab: { line, stop },
+          })
+        }
       },
       deep: true,
       immediate: true,

src/App.vue

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Vuex from 'vuex'
+import VuexPersistence from 'vuex-persist'
 import './registerServiceWorker'
 import App from './App.vue'
 
@@ -9,7 +10,7 @@ Vue.use(VueRouter)
 Vue.use(Vuex)
 
 const routes = [
-  { path: '/', redirect: '/1' },
+  { path: '/', component: App },
   { path: '/:tab', component: App },
   { path: '/:tab/:line', component: App },
   { path: '/:tab/:line/:stop', component: App },
@@ -49,6 +50,7 @@ const store = new Vuex.Store({
       state.tabs = newTabs
     },
   },
+  plugins: [new VuexPersistence().plugin],
 })
 
 new Vue({

src/main.ts

@@ -22,11 +22,6 @@ import { getLinesByCategory } from '@/utils/localstore/lines'
 export default Vue.extend({
   name: 'TabPageNew',
   components: { LineIcon },
-  methods: {
-    redirectToHome () {
-      this.$router.push('/1')
-    },
-  },
   computed: {
     linesByCategory () {
       return getLinesByCategory()

src/pages/TabPage/New.vue

@@ -4389,7 +4389,7 @@
     "flatted" "^3.1.0"
     "rimraf" "^3.0.2"
 
-"flatted@^3.1.0":
+"flatted@^3.0.5", "flatted@^3.1.0":
   "integrity" "sha512-0sQoMh9s0BYsm+12Huy/rkKxVu4R1+r96YX5cG44rHV0pQ6iC3Q+mkoMFaGWObMFYQxCVT+ssG1ksneA2MI9KQ=="
   "resolved" "https://registry.npmmirror.com/flatted/-/flatted-3.2.6.tgz"
   "version" "3.2.6"
@@ -8490,7 +8490,15 @@
     "@vue/compiler-sfc" "2.7.8"
     "csstype" "^3.1.0"
 
-"vuex@^3.6.2":
+"vuex-persist@^3.1.3":
+  "integrity" "sha512-QWOpP4SxmJDC5Y1+0+Yl/F4n7z27syd1St/oP+IYCGe0X0GFio0Zan6kngZFufdIhJm+5dFGDo3VG5kdkCGeRQ=="
+  "resolved" "https://registry.npmjs.org/vuex-persist/-/vuex-persist-3.1.3.tgz"
+  "version" "3.1.3"
+  dependencies:
+    "deepmerge" "^4.2.2"
+    "flatted" "^3.0.5"
+
+"vuex@^3.6.2", "vuex@>=2.5":
   "integrity" "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw=="
   "resolved" "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz"
   "version" "3.6.2"