src/router/index.ts

@@ -1,23 +1,28 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import { createRouter, createWebHistory } from "vue-router";
+import HomeView from "../views/HomeView.vue";
+import RuleView from "../views/RuleView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: '/',
-      name: 'home',
-      component: HomeView
+      path: "/",
+      name: "home",
+      component: HomeView,
     },
     {
-      path: '/about',
-      name: 'about',
+      path: "/jdr/:jdr/rules/:category/:filepath",
+      component: RuleView,
+    },
+    {
+      path: "/about",
+      name: "about",
       // route level code-splitting
       // this generates a separate chunk (About.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
-      component: () => import('../views/AboutView.vue')
-    }
-  ]
-})
+      component: () => import("../views/AboutView.vue"),
+    },
+  ],
+});
 
-export default router
+export default router;

src/views/RuleView.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import MarkdownFile from "../components/MarkdownFile.vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+const category = route.params.category;
+const filepath = route.params.filepath;
+</script>
+
+<template>
+  <main>
+    <MarkdownFile :path="`rules/${category}/${filepath}`" />
+  </main>
+</template>