访问json得到pdf文件信息

src/App.vue

@@ -29,13 +29,22 @@
                         <td>{{ file }}</td>
                         <td class="text-center">
                           <a
-                            :href="`${url_root}pdfjs/web/viewer.html?file=${url_root}${file}`"
+                            :href="
+                              url_root +
+                              'pdfjs/web/viewer.html?file=' +
+                              url_root +
+                              category.name +
+                              '/' +
+                              file
+                            "
                             target="_blank"
                             ><i class="bi bi-book"></i
                           ></a>
                         </td>
                         <td class="text-center">
-                          <a :href="`${url_root}${file}`"><i class="bi bi-cloud-download"></i></a>
+                          <a :href="`${url_root}${category.name}/${file}`"
+                            ><i class="bi bi-cloud-download"></i
+                          ></a>
                         </td>
                       </tr>
                     </tbody>
@@ -53,20 +62,19 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import axios from 'axios';
 
 export default defineComponent({
   name: 'App',
   data() {
     return {
-      // url_root: '/~lixiangyu/',
-      url_root: '/',
-      categories: [
-        {
-          name: 'Computer',
-          files: ['modern-full-stack.pdf', 'gdb.pdf'],
-        },
-      ],
+      url_root: process.env.VUE_APP_URL_ROOT,
+      categories: [],
     };
   },
+  async created() {
+    const { data } = await axios.get(`${this.url_root}db.json`);
+    this.categories = data.categories;
+  },
 });
 </script>