diff --git a/aleksis/apps/alsijil/assets/components/alsijil/CourseBook.vue b/aleksis/apps/alsijil/assets/components/alsijil/CourseBook.vue
index 633f4b2b6cc4f28c5db9955c23dbfe5e54ab5dcb..87cc4dc20e0587a2191e8ac4b07ace34d555254e 100644
--- a/aleksis/apps/alsijil/assets/components/alsijil/CourseBook.vue
+++ b/aleksis/apps/alsijil/assets/components/alsijil/CourseBook.vue
@@ -1,7 +1,7 @@
 <template>
   <ApolloQuery
     :query="require('./CourseBook.graphql')"
-    :variables="{ lessonId }"
+    :variables="{ lessonId: $route.params.lessonId }"
   >
     <template v-slot="{ result: { loading, error, data } }">
         <!-- Error -->
@@ -54,8 +54,14 @@
 
 <script>
 import {CHANGES, SAVED, UPDATING} from "../../UpdateStatuses.js";
+import UpdateIndicator from "./UpdateIndicator.js";
+import LessonDocumentation from "./LessonDocumentation.js";
 
 export default {
+    components: {
+        UpdateIndicator,
+        LessonDocumentation
+    },
     methods: {
         processDataChange(event) {
             this.status = CHANGES;
@@ -78,13 +84,11 @@ export default {
             }, 500)
         }
     },
-    props: ["lessonId"],
     name: "course-book",
     data: () => {
         return {
             ping: "ping",
             status: SAVED,
-            // lessonId: 352
         }
     }
 }
diff --git a/aleksis/apps/alsijil/assets/components/alsijil/LessonDocumentation.js b/aleksis/apps/alsijil/assets/components/alsijil/LessonDocumentation.js
index 1e0115b071eafaba81bf7b812bd52e778da07e83..5056fc1b3f83c0881c3f1a794f25a8d5ba6ca8a5 100644
--- a/aleksis/apps/alsijil/assets/components/alsijil/LessonDocumentation.js
+++ b/aleksis/apps/alsijil/assets/components/alsijil/LessonDocumentation.js
@@ -1,4 +1,9 @@
+import PersonalNotes from "./PersonalNotes.js";
+
 export default {
+    components: {
+        PersonalNotes
+    },
     props: [
         "id",
         "date",
diff --git a/aleksis/apps/alsijil/assets/index.js b/aleksis/apps/alsijil/assets/index.js
index 0846fd5163c8be3a628e8535e4984011582bad21..6de7cf0f3711a087f0a326a353900fcb18cad09f 100644
--- a/aleksis/apps/alsijil/assets/index.js
+++ b/aleksis/apps/alsijil/assets/index.js
@@ -1,11 +1,3 @@
-import Vue from "vue"
-
-import UpdateIndicator from "./components/alsijil/UpdateIndicator.js";
-import PersonalNotes from "./components/alsijil/PersonalNotes.js";
-import LessonDocumentation from "./components/alsijil/LessonDocumentation.js";
 import CourseBook from './components/alsijil/CourseBook.vue'
 
-Vue.component(UpdateIndicator.name, UpdateIndicator);
-Vue.component(PersonalNotes.name, PersonalNotes);
-Vue.component(LessonDocumentation.name, LessonDocumentation);
-Vue.component(CourseBook.name, CourseBook);
+window.router.addRoute({ path: "/app/alsijil/coursebook/:lessonId", component: CourseBook });
diff --git a/aleksis/apps/alsijil/templates/alsijil/class_register/coursebook.html b/aleksis/apps/alsijil/templates/alsijil/class_register/coursebook.html
index 98627239d203e97e9713c1709db5cb6f53fa280f..efb2effa55c8b9dec6983303bf1539688b1ef8d3 100644
--- a/aleksis/apps/alsijil/templates/alsijil/class_register/coursebook.html
+++ b/aleksis/apps/alsijil/templates/alsijil/class_register/coursebook.html
@@ -9,7 +9,7 @@
 {% endblock %}
 {% block browser_title %}{% trans "Coursebook" %} {{ lesson }}{% endblock %}
 {% block content %}
-<course-book lesson-id="{{ lesson.id }}"></course-book>
+<router-view/>
 {% endblock %}
 
 {% block extra_body %}