add query params to remember opened texts & define what component to append based on those query

src/pages/Biblio.vue

@@ -1,11 +1,18 @@
 <template>
   <component-debug :component="this">
+    <div class="py-3">
+      <b-button @click="openText">
+        add text 50
+      </b-button>
+    </div>
+
     <component :is="mode" />
+    <text-card v-for="group in groups" :key="group.id" :id="group.id" />
   </component-debug>
 </template>
 
 <script>
-import { CardList, CardMap, TreeMap } from './biblio'
+import { CardList, CardMap, TreeMap, TextCard } from './biblio'
 
 
 export default {
@@ -14,11 +21,43 @@ export default {
   components: {
     CardList,
     CardMap,
-    TreeMap
+    TreeMap,
+    TextCard
+  },
+
+  metaInfo () {
+    return {
+      title: this.groups.length ? 'Bibliothèque - ' + this.groups[0].id : 'Bibliothèque',
+      meta: [
+        { charset: 'utf-8' },
+        { name: 'viewport', content: 'width=device-width, initial-scale=1' }
+      ]
+    }
   },
 
   props: {
-    mode: { type: String, required: true }
+    mode: { type: String, required: true },
+    texts: { type: Array, required: true }
+  },
+
+  computed: {
+    groups () {
+      return this.texts.map(text => {
+        const [id, ...prod] = text
+        return { id, prod }
+      })
+    }
+  },
+
+  methods: {
+    openText () {
+      this.$router.push({
+        query: {
+          mode: this.mode,
+          texts: [...this.texts, [50]]
+        }
+      })
+    }
   }
 }
 </script>

src/pages/Home.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="home">
-    {{ text }}
+    <b-button :to="{ name: 'biblio', query }">
+      Biblio
+    </b-button>
   </div>
 </template>
 
@@ -10,14 +12,11 @@ export default {
 
   data () {
     return {
-      text: null
+      query: {
+        mode: 'card-list',
+        texts: [[1, 10, 2], [20, 5, 19]]
+      }
     }
-  },
-
-  created () {
-    this.$store.dispatch('GET_TEXT', { id: 1 }).then(data => {
-      this.text = data.textref
-    })
   }
 }
 </script>