1 files changed, 50 insertions, 33 deletions
diff --git a/src/router.js b/src/router.js
index 3d7958f3..e5f24d2e 100644
--- a/src/router.js
+++ b/src/router.js
@@ -25,47 +25,64 @@ import AppSidebar from './views/AppSidebar.vue'
 import Calendar from './views/AppContent/Calendar.vue'
 import Collections from './views/AppContent/Collections.vue'
 
-import Vue from 'vue'
-import VueRouter from 'vue-router'
+import { h } from 'vue'
+import { createWebHashHistory, createRouter, RouterView } from 'vue-router'
 
 const routes = [
-	// using
-	// { path: '/collections/all', component: CollectionGeneral, alias: '/' },
-	// instead of
 	{ path: '/', redirect: getInitialRoute() },
-	// would also be an option, but it currently does not work
-	// reliably with router-link due to
-	// https://github.com/vuejs/vue-router/issues/419
-	{ name: 'collections', path: '/collections/:collectionId', component: Collections, props: true },
 	{
-		name: 'collectionsTask',
-		path: '/collections/:collectionId/tasks/:taskId',
-		components: { default: Collections, AppSidebar },
-		props: { default: true, AppSidebar: true },
+		path: '/collections/:collectionId',
+		components: {
+			default: { render: () => h(RouterView, { name: 'default' }) },
+			AppSidebar: { render: () => h(RouterView, { name: 'AppSidebar' }) },
+		},
+		children: [
+			{
+				name: 'collections',
+				path: '/collections/:collectionId',
+				component: Collections,
+				props: true,
+			},
+			{
+				name: 'collectionsTask',
+				path: '/collections/:collectionId/tasks/:taskId',
+				components: { default: Collections, AppSidebar },
+				props: { default: true, AppSidebar: true },
+			},
+			{
+				name: 'collectionsParamTask',
+				path: '/collections/:collectionId/:collectionParam/tasks/:taskId',
+				components: { default: Collections, AppSidebar },
+				props: { default: true, AppSidebar: true },
+			},
+		],
 	},
 	{
-		name: 'collectionsParamTask',
-		path: '/collections/:collectionId/:collectionParam/tasks/:taskId',
-		components: { default: Collections, AppSidebar },
-		props: { default: true, AppSidebar: true },
-	},
-	{
-		name: 'calendars',
 		path: '/calendars/:calendarId',
-		component: Calendar,
-		props: true,
-	},
-	{
-		name: 'calendarsTask',
-		path: '/calendars/:calendarId/tasks/:taskId',
-		components: { default: Calendar, AppSidebar },
-		props: { default: true, AppSidebar: true },
+		components: {
+			default: { render: () => h(RouterView, { name: 'default' }) },
+			AppSidebar: { render: () => h(RouterView, { name: 'AppSidebar' }) },
+		},
+		children: [
+			{
+				name: 'calendars',
+				path: '/calendars/:calendarId',
+				component: Calendar,
+				props: true,
+			},
+			{
+				name: 'calendarsTask',
+				path: '/calendars/:calendarId/tasks/:taskId',
+				components: { default: Calendar, AppSidebar },
+				props: { default: true, AppSidebar: true },
+			},
+		],
 	},
 ]
 
-Vue.use(VueRouter)
-
-export default new VueRouter({
-	linkActiveClass: 'active',
-	routes, // short for `routes: routes`
+const router = createRouter({
+	history: createWebHashHistory(),
+	routes,
 })
+
+export default router