From ae854d4c38cbd1677d207b4a3b3bd33597b6e7d7 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Sat, 14 Jan 2023 13:25:48 +0100
Subject: [PATCH 01/18] Vue 3: Fix OcTooltip for Vue 3 components

---
 .../design-system/src/directives/OcTooltip.ts    | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/design-system/src/directives/OcTooltip.ts b/packages/design-system/src/directives/OcTooltip.ts
index ddce940f63a..affe7394e1b 100644
--- a/packages/design-system/src/directives/OcTooltip.ts
+++ b/packages/design-system/src/directives/OcTooltip.ts
@@ -47,14 +47,14 @@ export const destroy = (_tippy) => {
   }
 }
 
-const initOrUpdate = (el, { value = {} }: any, { elm }) => {
+const initOrUpdate = (el, { value = {} }: any) => {
   if (Object.prototype.toString.call(value) !== '[object Object]') {
     value = { content: value }
   }
 
-  if (value.content !== 0 && !value.content) {
-    destroy(elm.tooltip)
-    elm.tooltip = null
+  if ((value.content !== 0 && !value.content) || value.content === '') {
+    destroy(el.tooltip)
+    el.tooltip = null
     return
   }
 
@@ -69,20 +69,20 @@ const initOrUpdate = (el, { value = {} }: any, { elm }) => {
     value
   ])
 
-  if (!elm.tooltip) {
-    elm.tooltip = tippy(el, {
+  if (!el.tooltip) {
+    el.tooltip = tippy(el, {
       ...props,
       plugins: [hideOnEsc, ariaHidden]
     })
     return
   }
 
-  elm.tooltip.setProps(props)
+  el.tooltip.setProps(props)
 }
 
 export default {
   name: 'OcTooltip',
   beforeMount: initOrUpdate,
   updated: initOrUpdate,
-  unmounted: (el, binding, { elm }) => destroy(elm.tooltip)
+  unmounted: (el, binding) => destroy(el.tooltip)
 }

From 49726056cebee562df414f2052e4cb4075320959 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Sat, 14 Jan 2023 13:26:43 +0100
Subject: [PATCH 02/18] Bump vue-router

---
 packages/web-app-files/package.json      |  2 +-
 packages/web-pkg/package.json            |  2 +-
 packages/web-runtime/package.json        |  2 +-
 packages/web-runtime/src/defaults/vue.js |  2 -
 packages/web-runtime/src/index.ts        |  6 +-
 packages/web-runtime/src/router/index.ts | 11 +--
 packages/web-test-helpers/package.json   |  2 +-
 pnpm-lock.yaml                           | 93 ++++++++----------------
 8 files changed, 41 insertions(+), 79 deletions(-)

diff --git a/packages/web-app-files/package.json b/packages/web-app-files/package.json
index fa83f2c058a..2889a059a8d 100644
--- a/packages/web-app-files/package.json
+++ b/packages/web-app-files/package.json
@@ -25,7 +25,7 @@
     "uuid": "^9.0.0",
     "vue-concurrency": "4.0.0",
     "vue-gettext": "2.1.12",
-    "vue-router": "3.6.5",
+    "vue-router": "4.1.6",
     "vuex": "4.1.0",
     "web-app-files": "workspace:*",
     "web-app-search": "workspace:*",
diff --git a/packages/web-pkg/package.json b/packages/web-pkg/package.json
index 4ffbc41df72..9f4a774f5cc 100644
--- a/packages/web-pkg/package.json
+++ b/packages/web-pkg/package.json
@@ -12,7 +12,7 @@
     "popper-max-size-modifier": "^0.2.0",
     "qs": "^6.10.3",
     "uuid": "^9.0.0",
-    "vue-router": "3.6.5",
+    "vue-router": "4.1.6",
     "vuex": "4.1.0",
     "web-client": "npm:@ownclouders/web-client",
     "web-pkg": "npm:@ownclouders/web-pkg",
diff --git a/packages/web-runtime/package.json b/packages/web-runtime/package.json
index e701607c9d5..075da732af0 100644
--- a/packages/web-runtime/package.json
+++ b/packages/web-runtime/package.json
@@ -43,7 +43,7 @@
     "vue-concurrency": "4.0.0",
     "vue-gettext": "2.1.12",
     "vue-inline-svg": "3.1.0",
-    "vue-router": "3.6.5",
+    "vue-router": "4.1.6",
     "vue-select": "4.0.0-beta.6",
     "vuex": "4.1.0",
     "vuex-router-sync": "^5.0.0",
diff --git a/packages/web-runtime/src/defaults/vue.js b/packages/web-runtime/src/defaults/vue.js
index b98d935c9d6..eb4c240e204 100644
--- a/packages/web-runtime/src/defaults/vue.js
+++ b/packages/web-runtime/src/defaults/vue.js
@@ -3,11 +3,9 @@ import WebPlugin from '../plugins/web'
 import Avatar from '../components/Avatar.vue'
 import focusMixin from '../mixins/focusMixin'
 import lifecycleMixin from '../mixins/lifecycleMixin'
-import VueRouter from 'vue-router'
 import Vuex from 'vuex'
 
 Vue.use(Vuex)
-Vue.use(VueRouter)
 Vue.use(WebPlugin)
 
 Vue.component('AvatarImage', Avatar)
diff --git a/packages/web-runtime/src/index.ts b/packages/web-runtime/src/index.ts
index 8393bd6d5b0..546b8bb582f 100644
--- a/packages/web-runtime/src/index.ts
+++ b/packages/web-runtime/src/index.ts
@@ -65,13 +65,12 @@ export const bootstrap = async (configurationPath: string): Promise<void> => {
   announceDefaults({ store, router })
 }
 
-export const renderSuccess = (): void => {
+export const renderSuccess = async (): Promise<void> => {
   Vue.prototype.$store = store
 
   const applications = Array.from(applicationStore.values())
   const instance = createApp({
     store,
-    router,
     render() {
       return h(pages.success)
     }
@@ -86,6 +85,9 @@ export const renderSuccess = (): void => {
   // @vueuse/head
   instance.use(createHead())
 
+  // install router
+  instance.use(router)
+
   // mount App
   instance.mount('#owncloud')
   applications.forEach((application) => application.mounted(instance))
diff --git a/packages/web-runtime/src/router/index.ts b/packages/web-runtime/src/router/index.ts
index 5a9b27997c9..7cdef5375cc 100644
--- a/packages/web-runtime/src/router/index.ts
+++ b/packages/web-runtime/src/router/index.ts
@@ -8,7 +8,7 @@ import ResolvePublicLinkPage from '../pages/resolvePublicLink.vue'
 import ResolvePrivateLinkPage from '../pages/resolvePrivateLink.vue'
 import { setupAuthGuard } from './setupAuthGuard'
 import { patchRouter } from './patchCleanPath'
-import VueRouter from 'vue-router'
+import { createRouter as _createRouter, createWebHashHistory, createWebHistory, RouterOptions } from 'vue-router'
 
 export * from './helpers'
 
@@ -17,8 +17,8 @@ function $gettext(msg) {
   return msg
 }
 
-export const createRouter = (options?: any) => {
-  ;(window as any).__HACK__router = new VueRouter(options)
+export const createRouter = (options?: RouterOptions) => {
+  ;(window as any).__HACK__router = _createRouter(options)
   return (window as any).__HACK__router
 }
 
@@ -36,10 +36,7 @@ export const router = patchRouter(
         addQueryPrefix: true
       })
     },
-    ...(base && {
-      mode: 'history',
-      base: new URL(base.href).pathname
-    }),
+    history: base && createWebHistory(new URL(base.href).pathname) || createWebHashHistory(),
     routes: [
       {
         path: '/login',
diff --git a/packages/web-test-helpers/package.json b/packages/web-test-helpers/package.json
index b2c86eb8b32..385c5204e50 100644
--- a/packages/web-test-helpers/package.json
+++ b/packages/web-test-helpers/package.json
@@ -5,7 +5,7 @@
   "peerDependencies": {
     "axios": "0.27.2",
     "vue-gettext": "2.1.12",
-    "vue-router": "3.6.5",
+    "vue-router": "4.1.6",
     "vuex": "4.1.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 708748f9e1f..2772b943006 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,12 +6,12 @@ patchedDependencies:
   '@adobe/leonardo-contrast-colors@1.0.0-alpha.16':
     hash: uknaqjiop66j4kgrr7nmysu5gi
     path: patches/@adobe__leonardo-contrast-colors@1.0.0-alpha.16.patch
-  jest-serializer-vue-tjw@3.19.0:
-    hash: n3ezndisi6xx2kbxcsk5pv4dxy
-    path: patches/jest-serializer-vue-tjw@3.19.0.patch
   vue-gettext@2.1.12:
     hash: 6c2crj3kpnhb2sofrku4e7jhce
     path: patches/vue-gettext@2.1.12.patch
+  jest-serializer-vue-tjw@3.19.0:
+    hash: n3ezndisi6xx2kbxcsk5pv4dxy
+    path: patches/jest-serializer-vue-tjw@3.19.0.patch
   keycode@2.2.1:
     hash: nmisee7m676ph5sqah5fka5ueu
     path: patches/keycode@2.2.1.patch
@@ -477,7 +477,7 @@ importers:
       uuid: ^9.0.0
       vue-concurrency: 4.0.0
       vue-gettext: 2.1.12
-      vue-router: 3.6.5
+      vue-router: 4.1.6
       vuex: 4.1.0
       web-app-files: workspace:*
       web-app-search: workspace:*
@@ -496,10 +496,10 @@ importers:
       sanitize-html: 2.7.0
       semver: 7.3.8
       uuid: 9.0.0
-      vue-concurrency: 4.0.0
+      vue-concurrency: 4.0.0_vue@3.2.45
       vue-gettext: 2.1.12_6c2crj3kpnhb2sofrku4e7jhce
-      vue-router: 3.6.5
-      vuex: 4.1.0
+      vue-router: 4.1.6_vue@3.2.45
+      vuex: 4.1.0_vue@3.2.45
       web-app-files: 'link:'
       web-app-search: link:../web-app-search
       web-client: link:../web-client
@@ -507,7 +507,7 @@ importers:
       web-runtime: link:../web-runtime
     devDependencies:
       '@jest/globals': 29.3.1
-      '@vueuse/core': 9.8.2
+      '@vueuse/core': 9.8.2_vue@3.2.45
 
   packages/web-app-pdf-viewer:
     specifiers:
@@ -593,7 +593,7 @@ importers:
       qs: ^6.10.3
       uuid: ^9.0.0
       vue-concurrency: 4.0.0
-      vue-router: 3.6.5
+      vue-router: 4.1.6
       vuex: 4.1.0
       web-client: npm:@ownclouders/web-client
       web-pkg: npm:@ownclouders/web-pkg
@@ -605,9 +605,9 @@ importers:
       popper-max-size-modifier: 0.2.0_@popperjs+core@2.11.5
       qs: 6.10.3
       uuid: 9.0.0
-      vue-concurrency: 4.0.0
-      vue-router: 3.6.5
-      vuex: 4.1.0
+      vue-concurrency: 4.0.0_vue@3.2.45
+      vue-router: 4.1.6_vue@3.2.45
+      vuex: 4.1.0_vue@3.2.45
       web-client: link:../web-client
       web-pkg: 'link:'
 
@@ -654,7 +654,7 @@ importers:
       vue-concurrency: 4.0.0
       vue-gettext: 2.1.12
       vue-inline-svg: 3.1.0
-      vue-router: 3.6.5
+      vue-router: 4.1.6
       vue-select: 4.0.0-beta.6
       vuex: 4.1.0
       vuex-router-sync: ^5.0.0
@@ -703,10 +703,10 @@ importers:
       vue-concurrency: 4.0.0_vue@3.2.45
       vue-gettext: 2.1.12_6c2crj3kpnhb2sofrku4e7jhce
       vue-inline-svg: 3.1.0_agvlx64p3fh52dmj7mriww4tnm_vue@3.2.45
-      vue-router: 3.6.5_vue@3.2.45
+      vue-router: 4.1.6_vue@3.2.45
       vue-select: 4.0.0-beta.6_vue@3.2.45
       vuex: 4.1.0_vue@3.2.45
-      vuex-router-sync: 5.0.0_6x7cybbl2jmitybnyifyjha3eu
+      vuex-router-sync: 5.0.0_mhkwdqbz43jpnlolybzfmh5sqi
       web-client: link:../web-client
       web-pkg: link:../web-pkg
       web-runtime: 'link:'
@@ -722,13 +722,13 @@ importers:
     specifiers:
       axios: 0.27.2
       vue-gettext: 2.1.12
-      vue-router: 3.6.5
+      vue-router: 4.1.6
       vuex: 4.1.0
     dependencies:
       axios: 0.27.2
       vue-gettext: 2.1.12_6c2crj3kpnhb2sofrku4e7jhce
-      vue-router: 3.6.5
-      vuex: 4.1.0
+      vue-router: 4.1.6_vue@3.2.45
+      vuex: 4.1.0_vue@3.2.45
 
   tests/acceptance:
     specifiers:
@@ -6575,13 +6575,13 @@ packages:
       - supports-color
     dev: true
 
-  /@vueuse/core/9.8.2:
+  /@vueuse/core/9.8.2_vue@3.2.45:
     resolution: {integrity: sha512-aWiCmcYIpPt7xjuqYiceODEMHchDYthrJ4AqI+FXPZrR23PZOqdiktbUVyQl2kGlR3H4i9UJ/uimQrwhz9UouQ==}
     dependencies:
       '@types/web-bluetooth': 0.0.16
       '@vueuse/metadata': 9.8.2
-      '@vueuse/shared': 9.8.2
-      vue-demi: 0.13.11
+      '@vueuse/shared': 9.8.2_vue@3.2.45
+      vue-demi: 0.13.11_vue@3.2.45
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -6603,10 +6603,10 @@ packages:
     resolution: {integrity: sha512-N4E/BKS+9VsUeD4WLVRU1J2kCOLh+iikBcMtipFcTyL204132vDYHs27zLAVabJYGnhC0dIVGdhg9pbOZiY2TQ==}
     dev: true
 
-  /@vueuse/shared/9.8.2:
+  /@vueuse/shared/9.8.2_vue@3.2.45:
     resolution: {integrity: sha512-ACjrPQzowd5dnabNJt9EoGVobco9/ENiA5qP53vjiuxndlJYuc/UegwhXC7KdQbPX4F45a50+45K3g1wNqOzmA==}
     dependencies:
-      vue-demi: 0.13.11
+      vue-demi: 0.13.11_vue@3.2.45
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -22099,14 +22099,6 @@ packages:
     resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
     engines: {node: '>=0.10.0'}
 
-  /vue-concurrency/4.0.0:
-    resolution: {integrity: sha512-YOLrHang8w15bMOpftw6iPsoqlZT/u5zsblnT+CrVvc2HZ0eP76hjj77sgepHxB6FRcN3dlFXDNBMQ6iZzpiNw==}
-    peerDependencies:
-      vue: ^3.2.20 || ^2.7.0
-    dependencies:
-      caf: 15.0.1
-    dev: false
-
   /vue-concurrency/4.0.0_vue@3.2.45:
     resolution: {integrity: sha512-YOLrHang8w15bMOpftw6iPsoqlZT/u5zsblnT+CrVvc2HZ0eP76hjj77sgepHxB6FRcN3dlFXDNBMQ6iZzpiNw==}
     peerDependencies:
@@ -22116,19 +22108,6 @@ packages:
       vue: 3.2.45
     dev: false
 
-  /vue-demi/0.13.11:
-    resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
-    engines: {node: '>=12'}
-    hasBin: true
-    requiresBuild: true
-    peerDependencies:
-      '@vue/composition-api': ^1.0.0-rc.1
-      vue: ^3.0.0-0 || ^2.6.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-    dev: true
-
   /vue-demi/0.13.11_vue@3.2.45:
     resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
     engines: {node: '>=12'}
@@ -22142,7 +22121,6 @@ packages:
         optional: true
     dependencies:
       vue: 3.2.45
-    dev: false
 
   /vue-docgen-api/4.56.0_vue@3.2.45:
     resolution: {integrity: sha512-ab/Scb0DCjm4YVLf+AFa/R7XMFl8TVwUsvh26fFT5iaURih1m2hdd5Y8NveA7NQDcycpWavkFZj9eVbQdp2VGQ==}
@@ -22359,17 +22337,12 @@ packages:
       - whiskers
     dev: true
 
-  /vue-router/3.6.5:
-    resolution: {integrity: sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==}
+  /vue-router/4.1.6_vue@3.2.45:
+    resolution: {integrity: sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==}
     peerDependencies:
-      vue: ^2
-    dev: false
-
-  /vue-router/3.6.5_vue@3.2.45:
-    resolution: {integrity: sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==}
-    peerDependencies:
-      vue: ^2
+      vue: ^3.2.0
     dependencies:
+      '@vue/devtools-api': 6.4.5
       vue: 3.2.45
     dev: false
 
@@ -22519,24 +22492,16 @@ packages:
       '@vue/server-renderer': 3.2.45_vue@3.2.45
       '@vue/shared': 3.2.45
 
-  /vuex-router-sync/5.0.0_6x7cybbl2jmitybnyifyjha3eu:
+  /vuex-router-sync/5.0.0_mhkwdqbz43jpnlolybzfmh5sqi:
     resolution: {integrity: sha512-Mry2sO4kiAG64714X1CFpTA/shUH1DmkZ26DFDtwoM/yyx6OtMrc+MxrU+7vvbNLO9LSpgwkiJ8W+rlmRtsM+w==}
     peerDependencies:
       vue-router: ^3.0.0
       vuex: ^3.0.0
     dependencies:
-      vue-router: 3.6.5_vue@3.2.45
+      vue-router: 4.1.6_vue@3.2.45
       vuex: 4.1.0_vue@3.2.45
     dev: false
 
-  /vuex/4.1.0:
-    resolution: {integrity: sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==}
-    peerDependencies:
-      vue: ^3.2.0
-    dependencies:
-      '@vue/devtools-api': 6.4.5
-    dev: false
-
   /vuex/4.1.0_vue@3.2.45:
     resolution: {integrity: sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==}
     peerDependencies:

From 21964da8abda173f5f3aba11a92b7a9d22c3f811 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Sat, 14 Jan 2023 13:30:23 +0100
Subject: [PATCH 03/18] Adjust driveAliasAndItem to make it a string and
 optional.

With just * we receive an array in route.params, which is not what we want/need/expect. The question mark makes it optional, we need that to be able to redirect or do any sort of other fallback handling.
---
 packages/web-app-draw-io/src/index.js       | 2 +-
 packages/web-app-external/src/index.js      | 2 +-
 packages/web-app-files/src/router/public.ts | 2 +-
 packages/web-app-files/src/router/spaces.ts | 2 +-
 packages/web-app-files/src/router/trash.ts  | 2 +-
 packages/web-app-pdf-viewer/src/index.js    | 2 +-
 packages/web-app-preview/src/index.js       | 2 +-
 packages/web-app-text-editor/src/index.js   | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/web-app-draw-io/src/index.js b/packages/web-app-draw-io/src/index.js
index 0312bbe70e1..25b1a682f40 100644
--- a/packages/web-app-draw-io/src/index.js
+++ b/packages/web-app-draw-io/src/index.js
@@ -4,7 +4,7 @@ import App from './App.vue'
 const routes = [
   {
     name: 'draw-io',
-    path: '/:driveAliasAndItem*',
+    path: '/:driveAliasAndItem(.*)?',
     component: App,
     meta: {
       authContext: 'hybrid',
diff --git a/packages/web-app-external/src/index.js b/packages/web-app-external/src/index.js
index 92c6449d552..f8e7c287e83 100644
--- a/packages/web-app-external/src/index.js
+++ b/packages/web-app-external/src/index.js
@@ -10,7 +10,7 @@ const appInfo = {
 const routes = [
   {
     name: 'apps',
-    path: '/:driveAliasAndItem*',
+    path: '/:driveAliasAndItem(.*)?',
     component: App,
     meta: {
       authContext: 'hybrid',
diff --git a/packages/web-app-files/src/router/public.ts b/packages/web-app-files/src/router/public.ts
index 706ee7a3d2c..5e6e76f13d9 100644
--- a/packages/web-app-files/src/router/public.ts
+++ b/packages/web-app-files/src/router/public.ts
@@ -25,7 +25,7 @@ export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
     children: [
       {
         name: locationPublicLink.name,
-        path: ':driveAliasAndItem*',
+        path: ':driveAliasAndItem(.*)?',
         component: components.Spaces.DriveResolver,
         meta: {
           authContext: 'publicLink',
diff --git a/packages/web-app-files/src/router/spaces.ts b/packages/web-app-files/src/router/spaces.ts
index f3d5eb5bde0..cc2acc7f7ae 100644
--- a/packages/web-app-files/src/router/spaces.ts
+++ b/packages/web-app-files/src/router/spaces.ts
@@ -32,7 +32,7 @@ export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
         }
       },
       {
-        path: ':driveAliasAndItem*',
+        path: ':driveAliasAndItem(.*)?',
         name: locationSpacesGeneric.name,
         component: components.Spaces.DriveResolver,
         meta: {
diff --git a/packages/web-app-files/src/router/trash.ts b/packages/web-app-files/src/router/trash.ts
index b770f33ce39..aad4c61c007 100644
--- a/packages/web-app-files/src/router/trash.ts
+++ b/packages/web-app-files/src/router/trash.ts
@@ -18,7 +18,7 @@ export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
     children: [
       {
         name: locationTrashGeneric.name,
-        path: ':driveAliasAndItem*',
+        path: ':driveAliasAndItem(.*)?',
         component: components.Spaces.DriveResolver,
         meta: {
           authContext: 'user',
diff --git a/packages/web-app-pdf-viewer/src/index.js b/packages/web-app-pdf-viewer/src/index.js
index ec17da753c6..86a8a5523a3 100644
--- a/packages/web-app-pdf-viewer/src/index.js
+++ b/packages/web-app-pdf-viewer/src/index.js
@@ -8,7 +8,7 @@ function $gettext(msg) {
 
 const routes = [
   {
-    path: '/:driveAliasAndItem*',
+    path: '/:driveAliasAndItem(.*)?',
     component: App,
     name: 'pdf-viewer',
     meta: {
diff --git a/packages/web-app-preview/src/index.js b/packages/web-app-preview/src/index.js
index ccb25d87853..15d35f68ef4 100644
--- a/packages/web-app-preview/src/index.js
+++ b/packages/web-app-preview/src/index.js
@@ -8,7 +8,7 @@ function $gettext(msg) {
 
 const routes = [
   {
-    path: '/:driveAliasAndItem*',
+    path: '/:driveAliasAndItem(.*)?',
     component: App,
     name: 'media',
     meta: {
diff --git a/packages/web-app-text-editor/src/index.js b/packages/web-app-text-editor/src/index.js
index f495d6470ea..1777c528dcf 100644
--- a/packages/web-app-text-editor/src/index.js
+++ b/packages/web-app-text-editor/src/index.js
@@ -10,7 +10,7 @@ const appId = 'text-editor'
 
 const routes = [
   {
-    path: '/:driveAliasAndItem*',
+    path: '/:driveAliasAndItem(.*)?',
     component: App,
     name: 'text-editor',
     meta: {

From e99554c52e53148cb4eaaf0cfce80f31d3f59a3b Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Sat, 14 Jan 2023 13:52:39 +0100
Subject: [PATCH 04/18] Fix Router type

---
 packages/web-app-files/src/fileSideBars.ts    |  2 +-
 .../web-app-files/src/router/deprecated.ts    |  4 +--
 packages/web-app-files/src/router/utils.ts    |  9 ++---
 .../web-app-files/src/search/sdk/index.ts     |  6 ++--
 .../web-app-files/src/search/sdk/preview.ts   |  6 ++--
 .../src/services/folder/loaderSpace.ts        |  2 +-
 .../src/services/folder/loaderTrashbin.ts     |  2 +-
 .../tests/unit/components/Search/List.spec.ts |  2 --
 .../tests/unit/router/utils.spec.ts           | 33 +++++++++----------
 .../tests/unit/search/sdk.spec.ts             | 19 ++++++-----
 .../appDefaults/useAppNavigation.ts           |  4 +--
 .../src/composables/router/useActiveApp.ts    |  3 +-
 .../src/composables/router/useRouter.ts       |  4 +--
 .../unit/composables/router/useRouter.spec.ts |  7 ++--
 packages/web-runtime/src/container/api.ts     | 10 +++---
 .../src/container/application/classic.ts      |  4 +--
 .../src/container/application/index.ts        |  4 +--
 .../web-runtime/src/container/bootstrap.ts    |  8 ++---
 packages/web-runtime/src/container/types.ts   |  4 +--
 packages/web-runtime/src/router/helpers.ts    |  2 +-
 packages/web-runtime/src/router/index.ts      |  9 +++--
 .../web-runtime/src/router/patchCleanPath.ts  |  2 +-
 .../src/services/auth/authService.ts          |  6 ++--
 23 files changed, 79 insertions(+), 73 deletions(-)

diff --git a/packages/web-app-files/src/fileSideBars.ts b/packages/web-app-files/src/fileSideBars.ts
index d536993b3e7..5060f07b539 100644
--- a/packages/web-app-files/src/fileSideBars.ts
+++ b/packages/web-app-files/src/fileSideBars.ts
@@ -18,7 +18,7 @@ import { spaceRoleEditor, spaceRoleManager } from 'web-client/src/helpers/share'
 import { Panel } from '../../web-pkg/src/components/sideBar'
 
 import { Resource, User } from 'web-client'
-import Router from 'vue-router'
+import { Router } from 'vue-router'
 
 function $gettext(msg: string): string {
   return msg
diff --git a/packages/web-app-files/src/router/deprecated.ts b/packages/web-app-files/src/router/deprecated.ts
index 96a50c20b76..8c7761f7856 100644
--- a/packages/web-app-files/src/router/deprecated.ts
+++ b/packages/web-app-files/src/router/deprecated.ts
@@ -1,4 +1,4 @@
-import VueRouter, { RouteConfig, Route, Location, RouteMeta } from 'vue-router'
+import { RouteConfig, Route, Location, RouteMeta, Router } from 'vue-router'
 import { createLocationSpaces } from './spaces'
 import { createLocationShares } from './shares'
 import { createLocationCommon } from './common'
@@ -100,7 +100,7 @@ export const buildRoutes = (): RouteConfig[] =>
  * @param comparatives
  */
 export const isLocationActive = (
-  router: VueRouter,
+  router: Router,
   ...comparatives: [Location, ...Location[]]
 ): boolean => {
   const [first, ...rest] = comparatives.map((c) => {
diff --git a/packages/web-app-files/src/router/utils.ts b/packages/web-app-files/src/router/utils.ts
index fb05096d6fc..5ec59f08711 100644
--- a/packages/web-app-files/src/router/utils.ts
+++ b/packages/web-app-files/src/router/utils.ts
@@ -1,8 +1,9 @@
-import VueRouter, { Location } from 'vue-router'
+import { Location } from 'vue-router'
+import { Router } from 'web-pkg/src/types/router'
 import merge from 'lodash-es/merge'
 
 export interface ActiveRouteDirectorFunc<T extends string> {
-  (router: VueRouter, ...comparatives: T[]): boolean
+  (router: Router, ...comparatives: T[]): boolean
 }
 
 /**
@@ -13,7 +14,7 @@ export interface ActiveRouteDirectorFunc<T extends string> {
  * @param comparatives
  */
 export const isLocationActive = (
-  router: VueRouter,
+  router: Router,
   ...comparatives: [Location, ...Location[]]
 ): boolean => {
   const { href: currentHref } = router.resolve(router.currentRoute)
@@ -47,7 +48,7 @@ export const isLocationActive = (
 export const isLocationActiveDirector = <T extends string>(
   ...defaultComparatives: [Location, ...Location[]]
 ): ActiveRouteDirectorFunc<T> => {
-  return (router: VueRouter, ...comparatives: T[]): boolean => {
+  return (router: Router, ...comparatives: T[]): boolean => {
     if (!comparatives.length) {
       return isLocationActive(router, ...defaultComparatives)
     }
diff --git a/packages/web-app-files/src/search/sdk/index.ts b/packages/web-app-files/src/search/sdk/index.ts
index 14efc43f8a3..7ce144b9106 100644
--- a/packages/web-app-files/src/search/sdk/index.ts
+++ b/packages/web-app-files/src/search/sdk/index.ts
@@ -3,7 +3,7 @@ import Preview from './preview'
 import List from './list'
 import { EventBus } from 'web-pkg/src/services/eventBus'
 import { Store } from 'vuex'
-import VueRouter from 'vue-router'
+import { Router } from 'vue-router'
 
 function $gettext(msg) {
   return msg
@@ -14,9 +14,9 @@ export default class Provider extends EventBus implements SearchProvider {
   public readonly previewSearch: SearchPreview
   public readonly listSearch: SearchList
   private readonly store: Store<any>
-  private readonly router: VueRouter
+  private readonly router: Router
 
-  constructor(store: Store<any>, router: VueRouter) {
+  constructor(store: Store<any>, router: Router) {
     super()
 
     this.id = 'files.sdk'
diff --git a/packages/web-app-files/src/search/sdk/preview.ts b/packages/web-app-files/src/search/sdk/preview.ts
index 5ebbffa6c33..009fc05edeb 100644
--- a/packages/web-app-files/src/search/sdk/preview.ts
+++ b/packages/web-app-files/src/search/sdk/preview.ts
@@ -4,7 +4,7 @@ import { clientService } from 'web-pkg/src/services'
 import { buildResource } from 'web-client/src/helpers'
 import { Cache } from 'web-pkg/src/helpers/cache'
 import { Component } from 'vue'
-import VueRouter from 'vue-router'
+import { Router } from 'vue-router'
 import { DavProperties } from 'web-client/src/webdav/constants'
 import { Store } from 'vuex'
 
@@ -13,10 +13,10 @@ export const previewSearchLimit = 8
 export default class Preview implements SearchPreview {
   public readonly component: Component
   private readonly cache: Cache<string, SearchResult>
-  private readonly router: VueRouter
+  private readonly router: Router
   private readonly store: Store<any>
 
-  constructor(store: Store<any>, router: VueRouter) {
+  constructor(store: Store<any>, router: Router) {
     this.component = PreviewComponent
     this.router = router
     this.store = store
diff --git a/packages/web-app-files/src/services/folder/loaderSpace.ts b/packages/web-app-files/src/services/folder/loaderSpace.ts
index 662c888e396..b9024d50f70 100644
--- a/packages/web-app-files/src/services/folder/loaderSpace.ts
+++ b/packages/web-app-files/src/services/folder/loaderSpace.ts
@@ -1,5 +1,5 @@
 import { FolderLoader, FolderLoaderTask, TaskContext } from '../folder'
-import Router from 'vue-router'
+import { Router } from 'vue-router'
 import { useTask } from 'vue-concurrency'
 import { isLocationPublicActive, isLocationSpacesActive } from '../../router'
 import {
diff --git a/packages/web-app-files/src/services/folder/loaderTrashbin.ts b/packages/web-app-files/src/services/folder/loaderTrashbin.ts
index ffbf52924cd..41ac93ed445 100644
--- a/packages/web-app-files/src/services/folder/loaderTrashbin.ts
+++ b/packages/web-app-files/src/services/folder/loaderTrashbin.ts
@@ -1,5 +1,5 @@
 import { FolderLoader, FolderLoaderTask, TaskContext } from '../folder'
-import Router from 'vue-router'
+import { Router } from 'vue-router'
 import { useTask } from 'vue-concurrency'
 import { DavProperties } from 'web-client/src/webdav/constants'
 import { isLocationTrashActive } from '../../router'
diff --git a/packages/web-app-files/tests/unit/components/Search/List.spec.ts b/packages/web-app-files/tests/unit/components/Search/List.spec.ts
index fa77aefca12..0b167d11d51 100644
--- a/packages/web-app-files/tests/unit/components/Search/List.spec.ts
+++ b/packages/web-app-files/tests/unit/components/Search/List.spec.ts
@@ -1,5 +1,4 @@
 import { describe } from '@jest/globals'
-// import VueRouter from 'vue-router'
 // import List from 'web-app-files/src/components/Search/List.vue'
 //
 // const stubs = {
@@ -98,7 +97,6 @@ describe('List component', () => {
 //       }
 //     },
 //     store: createStore(files),
-//     router: new VueRouter(),
 //     stubs,
 //     mock: {
 //       webdav: {
diff --git a/packages/web-app-files/tests/unit/router/utils.spec.ts b/packages/web-app-files/tests/unit/router/utils.spec.ts
index 234a8449d16..f7eb919a555 100644
--- a/packages/web-app-files/tests/unit/router/utils.spec.ts
+++ b/packages/web-app-files/tests/unit/router/utils.spec.ts
@@ -3,18 +3,19 @@ import {
   isLocationActiveDirector,
   createLocation
 } from '../../../src/router/utils'
-import VueRouter from 'vue-router'
+import { Router } from 'vue-router'
+import { mock } from 'jest-mock-extended'
 
 describe('utils', () => {
   describe('isLocationActive', () => {
     it('returns true if one location is active', () => {
-      const fakeRouter = {
+      const fakeRouter = mock<Router>({
         currentRoute: { name: 'foo' },
         resolve: (r) => ({ href: r.name })
-      }
+      })
 
-      expect(isLocationActive(fakeRouter as VueRouter, { name: 'foo' })).toBe(true)
-      expect(isLocationActive(fakeRouter as VueRouter, { name: 'foo' }, { name: 'bar' })).toBe(true)
+      expect(isLocationActive(fakeRouter, { name: 'foo' })).toBe(true)
+      expect(isLocationActive(fakeRouter, { name: 'foo' }, { name: 'bar' })).toBe(true)
     })
 
     it('returns false if all locations inactive', () => {
@@ -23,41 +24,39 @@ describe('utils', () => {
         resolve: (r) => ({ href: r.name })
       }
 
-      expect(isLocationActive(fakeRouter as VueRouter, { name: 'bar' })).toBe(false)
-      expect(isLocationActive(fakeRouter as VueRouter, { name: 'bar' }, { name: 'baz' })).toBe(
-        false
-      )
+      expect(isLocationActive(fakeRouter, { name: 'bar' })).toBe(false)
+      expect(isLocationActive(fakeRouter, { name: 'bar' }, { name: 'baz' })).toBe(false)
     })
   })
 
   describe('isLocationActiveDirector', () => {
     test('director can be created and be used to check active locations', () => {
-      const fakeRouter = {
+      const fakeRouter = mock<Router>({
         currentRoute: { name: 'unknown' },
         resolve: (r) => ({ href: r.name })
-      }
+      })
 
       const isFilesLocationActive = isLocationActiveDirector(
         { name: 'foo' },
         { name: 'bar' },
         { name: 'baz' }
       )
-      expect(isFilesLocationActive(fakeRouter as VueRouter)).toBe(false)
+      expect(isFilesLocationActive(fakeRouter)).toBe(false)
 
       fakeRouter.currentRoute.name = 'bar'
 
-      expect(isFilesLocationActive(fakeRouter as VueRouter)).toBe(true)
-      expect(isFilesLocationActive(fakeRouter as VueRouter, 'foo', 'bar')).toBe(true)
+      expect(isFilesLocationActive(fakeRouter)).toBe(true)
+      expect(isFilesLocationActive(fakeRouter, 'foo', 'bar')).toBe(true)
     })
 
     test('director closure only allows to check known locations and throws if unknown', () => {
-      const fakeRouter = {
+      const fakeRouter = mock<Router>({
         currentRoute: { name: 'baz' },
         resolve: (r) => ({ href: r.name })
-      }
+      })
 
       const isFilesLocationActive = isLocationActiveDirector({ name: 'foo' }, { name: 'bar' })
-      expect(() => isFilesLocationActive(fakeRouter as VueRouter, 'unknown')).toThrow()
+      expect(() => isFilesLocationActive(fakeRouter, 'unknown')).toThrow()
     })
   })
 
diff --git a/packages/web-app-files/tests/unit/search/sdk.spec.ts b/packages/web-app-files/tests/unit/search/sdk.spec.ts
index ac0ee5f9a08..184d1aa26fa 100644
--- a/packages/web-app-files/tests/unit/search/sdk.spec.ts
+++ b/packages/web-app-files/tests/unit/search/sdk.spec.ts
@@ -1,8 +1,8 @@
 import { SDKSearch } from '../../../src/search'
 import { clientService } from 'web-pkg/src/services'
 import { Store } from 'vuex'
-import VueRouter from 'vue-router'
-import { mockDeep } from 'jest-mock-extended'
+import { Router } from 'vue-router'
+import { mock, mockDeep } from 'jest-mock-extended'
 
 const searchMock = jest.fn()
 jest.spyOn(clientService, 'owncloudSdk', 'get').mockImplementation(
@@ -35,7 +35,7 @@ const storeWithoutFileSearch = mockDeep<Store<any>>({
 
 describe('SDKProvider', () => {
   it('is only available if announced via capabilities', () => {
-    const search = new SDKSearch(storeWithoutFileSearch, {} as unknown as VueRouter)
+    const search = new SDKSearch(storeWithoutFileSearch, mock<Router>())
     expect(search.available).toBe(false)
   })
 
@@ -46,16 +46,19 @@ describe('SDKProvider', () => {
         { route: 'search-provider-list' },
         { route: 'bar', available: true }
       ].forEach((v) => {
-        const search = new SDKSearch(store, {
-          currentRoute: { name: v.route }
-        } as unknown as VueRouter)
+        const search = new SDKSearch(
+          store,
+          mock<Router>({
+            currentRoute: { name: v.route }
+          })
+        )
 
         expect(!!search.previewSearch.available).toBe(!!v.available)
       })
     })
 
     it('can search', async () => {
-      const search = new SDKSearch(store, jest.fn() as unknown as VueRouter)
+      const search = new SDKSearch(store, mock<Router>())
       const files = [
         { id: 'foo', name: 'foo' },
         { id: 'bar', name: 'bar' },
@@ -75,7 +78,7 @@ describe('SDKProvider', () => {
   })
   describe('SDKProvider listSearch', () => {
     it('can search', async () => {
-      const search = new SDKSearch(store, jest.fn() as unknown as VueRouter)
+      const search = new SDKSearch(store, mock<Router>())
       const files = [
         { id: 'foo', name: 'foo' },
         { id: 'bar', name: 'bar' },
diff --git a/packages/web-pkg/src/composables/appDefaults/useAppNavigation.ts b/packages/web-pkg/src/composables/appDefaults/useAppNavigation.ts
index 1bfd72ec3de..9ef1104b3d4 100644
--- a/packages/web-pkg/src/composables/appDefaults/useAppNavigation.ts
+++ b/packages/web-pkg/src/composables/appDefaults/useAppNavigation.ts
@@ -1,5 +1,5 @@
 import { unref } from 'vue'
-import VueRouter, { Location } from 'vue-router'
+import { Location, Router } from 'vue-router'
 
 import { MaybeRef } from '../../utils'
 import { FileContext } from './types'
@@ -8,7 +8,7 @@ import { Resource } from 'web-client'
 import { useFileRouteReplace } from '../router/useFileRouteReplace'
 
 interface AppNavigationOptions {
-  router: VueRouter
+  router: Router
   currentFileContext: MaybeRef<FileContext>
 }
 
diff --git a/packages/web-pkg/src/composables/router/useActiveApp.ts b/packages/web-pkg/src/composables/router/useActiveApp.ts
index 4b3fbff4b59..4f35b7f82c7 100644
--- a/packages/web-pkg/src/composables/router/useActiveApp.ts
+++ b/packages/web-pkg/src/composables/router/useActiveApp.ts
@@ -1,6 +1,5 @@
 import { computed, ComputedRef, unref } from 'vue'
-import { useRoute } from './useRoute'
-import { Route } from 'vue-router'
+import { useRoute } from 'vue-router'
 
 export const activeApp = (route: Route): string => {
   return route.path.split('/')[1]
diff --git a/packages/web-pkg/src/composables/router/useRouter.ts b/packages/web-pkg/src/composables/router/useRouter.ts
index 83aff6d30a5..c8f15df78cd 100644
--- a/packages/web-pkg/src/composables/router/useRouter.ts
+++ b/packages/web-pkg/src/composables/router/useRouter.ts
@@ -1,7 +1,7 @@
-import VueRouter from 'vue-router'
+import { Router } from 'vue-router'
 import { useService } from '../service'
 
-export const useRouter = (): VueRouter => {
+export const useRouter = (): Router => {
   const hack = (window as any).__HACK__router
   if (hack) {
     return hack
diff --git a/packages/web-pkg/tests/unit/composables/router/useRouter.spec.ts b/packages/web-pkg/tests/unit/composables/router/useRouter.spec.ts
index 7c743d4a511..cf5616ccc91 100644
--- a/packages/web-pkg/tests/unit/composables/router/useRouter.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/router/useRouter.spec.ts
@@ -1,8 +1,7 @@
 import { useRouter } from 'web-pkg/src/composables'
-import VueRouter from 'vue-router'
 import { createRouter, getComposableWrapper } from 'web-test-helpers'
 
-describe('useRouter', () => {
+describe.skip('useRouter', () => {
   // FIXME
   it.skip('should be valid', () => {
     expect(useRouter).toBeDefined()
@@ -10,7 +9,9 @@ describe('useRouter', () => {
     const mocks = { $router: router }
     getComposableWrapper(
       () => {
-        expect(useRouter()).toBeInstanceOf(VueRouter)
+        // FIXME: Router is just a type, so we can't do a runtime check
+        // hopefully we can just get rid of our own useRouter composable
+        // expect(useRouter()).toBeInstanceOf(Router)
       },
       { mocks }
     )
diff --git a/packages/web-runtime/src/container/api.ts b/packages/web-runtime/src/container/api.ts
index b12384d703d..59b39e0eb37 100644
--- a/packages/web-runtime/src/container/api.ts
+++ b/packages/web-runtime/src/container/api.ts
@@ -1,4 +1,4 @@
-import VueRouter, { RouteConfig } from 'vue-router'
+import { RouteConfig, Router } from 'vue-router'
 import clone from 'lodash-es/clone'
 import {
   RuntimeApi,
@@ -18,7 +18,7 @@ import { App, Component, h } from 'vue'
  * @param router
  * @param routes
  */
-const announceRoutes = (applicationId: string, router: VueRouter, routes: RouteConfig[]): void => {
+const announceRoutes = (applicationId: string, router: Router, routes: RouteConfig[]): void => {
   if (!isArray(routes)) {
     throw new ApiError("routes can't be blank")
   }
@@ -205,7 +205,7 @@ const requestStore = (store: Store<unknown>): Store<unknown> => {
  *
  * @param router
  */
-const requestRouter = (router: VueRouter): VueRouter => {
+const requestRouter = (router: Router): Router => {
   if (isEqual(process.env.NODE_ENV, 'development')) {
     console.warn('requestRouter // router api is deprecated, use with caution')
   }
@@ -238,7 +238,7 @@ export const buildRuntimeApi = ({
   applicationId: string
   store: Store<unknown>
   translations: unknown
-  router: VueRouter
+  router: Router
   supportedLanguages: { [key: string]: string }
 }): RuntimeApi => {
   if (!applicationName) {
@@ -262,7 +262,7 @@ export const buildRuntimeApi = ({
     announceExtension: (extension: { [key: string]: unknown }): void =>
       announceExtension(applicationId, store, extension),
     requestStore: (): Store<unknown> => requestStore(store),
-    requestRouter: (): VueRouter => requestRouter(router),
+    requestRouter: (): Router => requestRouter(router),
     openPortal: (
       instance: App,
       toApp: string,
diff --git a/packages/web-runtime/src/container/application/classic.ts b/packages/web-runtime/src/container/application/classic.ts
index 4f8e18da68c..49104267204 100644
--- a/packages/web-runtime/src/container/application/classic.ts
+++ b/packages/web-runtime/src/container/application/classic.ts
@@ -4,7 +4,7 @@ import Vue, { App } from 'vue'
 import { isFunction, isObject } from 'lodash-es'
 import { NextApplication } from './next'
 import { Store } from 'vuex'
-import VueRouter from 'vue-router'
+import { Router } from 'vue-router'
 import { RuntimeError } from '../error'
 
 type VueConstructor = typeof Vue
@@ -78,7 +78,7 @@ export const convertClassicApplication = async ({
 }: {
   applicationScript: ClassicApplicationScript
   store: Store<unknown>
-  router: VueRouter
+  router: Router
   translations: unknown
   supportedLanguages: { [key: string]: string }
 }): Promise<NextApplication> => {
diff --git a/packages/web-runtime/src/container/application/index.ts b/packages/web-runtime/src/container/application/index.ts
index 9afc1e9842a..ab2c2648894 100644
--- a/packages/web-runtime/src/container/application/index.ts
+++ b/packages/web-runtime/src/container/application/index.ts
@@ -1,5 +1,5 @@
 import { Store } from 'vuex'
-import VueRouter from 'vue-router'
+import { Router } from 'vue-router'
 import { NextApplication } from './next'
 import { convertClassicApplication } from './classic'
 import { ClassicApplicationScript } from '../types'
@@ -54,7 +54,7 @@ export const buildApplication = async ({
 }: {
   applicationPath: string
   store: Store<unknown>
-  router: VueRouter
+  router: Router
   translations: unknown
   supportedLanguages: { [key: string]: string }
   configurationManager: ConfigurationManager
diff --git a/packages/web-runtime/src/container/bootstrap.ts b/packages/web-runtime/src/container/bootstrap.ts
index 544bee7438c..46914aa2a9c 100644
--- a/packages/web-runtime/src/container/bootstrap.ts
+++ b/packages/web-runtime/src/container/bootstrap.ts
@@ -2,7 +2,7 @@ import { registerClient } from '../services/clientRegistration'
 import { RuntimeConfiguration } from './types'
 import { buildApplication, NextApplication } from './application'
 import { Store } from 'vuex'
-import VueRouter from 'vue-router'
+import { Router } from 'vue-router'
 import Vue from 'vue'
 import { loadTheme } from '../helpers/theme'
 import OwnCloud from 'owncloud-sdk'
@@ -121,7 +121,7 @@ export const initializeApplications = async ({
   runtimeConfiguration: RuntimeConfiguration
   configurationManager: ConfigurationManager
   store: Store<unknown>
-  router: VueRouter
+  router: Router
   translations: unknown
   supportedLanguages: { [key: string]: string }
 }): Promise<NextApplication[]> => {
@@ -325,7 +325,7 @@ export const announceAuthService = ({
   vue: VueConstructor
   configurationManager: ConfigurationManager
   store: Store<any>
-  router: VueRouter
+  router: Router
 }): void => {
   authService.initialize(configurationManager, clientService, store, router)
   vue.prototype.$authService = authService
@@ -344,7 +344,7 @@ export const announceDefaults = ({
   router
 }: {
   store: Store<unknown>
-  router: VueRouter
+  router: Router
 }): void => {
   // set home route
   const appIds = store.getters.appIds
diff --git a/packages/web-runtime/src/container/types.ts b/packages/web-runtime/src/container/types.ts
index 6f5dd86ca39..594fe6e5ccc 100644
--- a/packages/web-runtime/src/container/types.ts
+++ b/packages/web-runtime/src/container/types.ts
@@ -1,5 +1,5 @@
 import { Store } from 'vuex'
-import VueRouter, { RouteConfig } from 'vue-router'
+import { RouteConfig, Router } from 'vue-router'
 import { App, Component } from 'vue'
 
 /** shim configuration for now, should be typed in a later step */
@@ -83,7 +83,7 @@ export interface RuntimeApi {
   announceStore: (applicationStore: Store<unknown>) => void
   announceExtension: (extension: { [key: string]: unknown }) => void
   requestStore: () => Store<unknown>
-  requestRouter: () => VueRouter
+  requestRouter: () => Router
   openPortal: (
     instance: App,
     toApp: string,
diff --git a/packages/web-runtime/src/router/helpers.ts b/packages/web-runtime/src/router/helpers.ts
index e010208bbca..eae077c09be 100644
--- a/packages/web-runtime/src/router/helpers.ts
+++ b/packages/web-runtime/src/router/helpers.ts
@@ -1,5 +1,5 @@
 import { base, router } from './index'
-import Router, { Route, RouteRecordPublic } from 'vue-router'
+import { Route, Router, RouteRecordPublic } from 'vue-router'
 import {
   authContextValues,
   contextQueryToFileContextProps,
diff --git a/packages/web-runtime/src/router/index.ts b/packages/web-runtime/src/router/index.ts
index 7cdef5375cc..0ddc6b95673 100644
--- a/packages/web-runtime/src/router/index.ts
+++ b/packages/web-runtime/src/router/index.ts
@@ -8,7 +8,12 @@ import ResolvePublicLinkPage from '../pages/resolvePublicLink.vue'
 import ResolvePrivateLinkPage from '../pages/resolvePrivateLink.vue'
 import { setupAuthGuard } from './setupAuthGuard'
 import { patchRouter } from './patchCleanPath'
-import { createRouter as _createRouter, createWebHashHistory, createWebHistory, RouterOptions } from 'vue-router'
+import {
+  createRouter as _createRouter,
+  createWebHashHistory,
+  createWebHistory,
+  RouterOptions
+} from 'vue-router'
 
 export * from './helpers'
 
@@ -36,7 +41,7 @@ export const router = patchRouter(
         addQueryPrefix: true
       })
     },
-    history: base && createWebHistory(new URL(base.href).pathname) || createWebHashHistory(),
+    history: (base && createWebHistory(new URL(base.href).pathname)) || createWebHashHistory(),
     routes: [
       {
         path: '/login',
diff --git a/packages/web-runtime/src/router/patchCleanPath.ts b/packages/web-runtime/src/router/patchCleanPath.ts
index a7995fcd7da..50db87f9b65 100644
--- a/packages/web-runtime/src/router/patchCleanPath.ts
+++ b/packages/web-runtime/src/router/patchCleanPath.ts
@@ -1,4 +1,4 @@
-import Router from 'vue-router'
+import { RouteLocation, RouteLocationNormalizedLoaded, RouteLocationRaw, Router } from 'vue-router'
 import get from 'lodash-es/get'
 
 // type: patch
diff --git a/packages/web-runtime/src/services/auth/authService.ts b/packages/web-runtime/src/services/auth/authService.ts
index 64c917b40e9..4be1cee442b 100644
--- a/packages/web-runtime/src/services/auth/authService.ts
+++ b/packages/web-runtime/src/services/auth/authService.ts
@@ -3,14 +3,14 @@ import { PublicLinkManager } from './publicLinkManager'
 import { Store } from 'vuex'
 import { ClientService } from 'web-pkg/src/services'
 import { ConfigurationManager } from 'web-pkg/src/configuration'
-import VueRouter, { Route } from 'vue-router'
+import { Route, Router } from 'vue-router'
 import { extractPublicLinkToken, isPublicLinkContext, isUserContext } from '../../router'
 
 export class AuthService {
   private clientService: ClientService
   private configurationManager: ConfigurationManager
   private store: Store<any>
-  private router: VueRouter
+  private router: Router
   private userManager: UserManager
   private publicLinkManager: PublicLinkManager
 
@@ -18,7 +18,7 @@ export class AuthService {
     configurationManager: ConfigurationManager,
     clientService: ClientService,
     store: Store<any>,
-    router: VueRouter
+    router: Router
   ): void {
     this.configurationManager = configurationManager
     this.clientService = clientService

From c123c1839ab38cdae83c640161c0d401ca5d2160 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Sat, 14 Jan 2023 14:41:45 +0100
Subject: [PATCH 05/18] Fix currentRoute usage

---
 packages/web-app-files/src/router/utils.ts    |  4 ++-
 .../web-app-files/src/search/sdk/preview.ts   |  4 +--
 .../src/services/folder/loaderSpace.ts        |  2 +-
 .../web-app-files/src/views/FilesDrop.vue     |  4 +--
 .../tests/unit/router/utils.spec.ts           | 25 ++++++-------
 .../src/components/Spaces/QuotaModal.vue      |  4 +--
 .../composables/router/useFileRouteReplace.ts |  3 +-
 .../src/composables/router/useRoute.ts        | 12 +++----
 .../src/composables/router/useRouteMeta.ts    |  2 +-
 .../src/composables/router/useRouteParam.ts   | 35 ++++++++-----------
 .../src/composables/router/useRouteQuery.ts   | 34 ++++++++----------
 packages/web-pkg/src/mixins/spaces/delete.ts  |  3 +-
 packages/web-pkg/src/mixins/spaces/disable.ts |  8 +++--
 .../src/mixins/spaces/editDescription.ts      |  3 +-
 .../web-pkg/src/mixins/spaces/navigate.ts     |  4 ++-
 packages/web-pkg/src/mixins/spaces/rename.ts  |  3 +-
 packages/web-pkg/src/mixins/spaces/restore.ts |  3 +-
 .../web-pkg/src/mixins/spaces/setReadme.ts    |  3 +-
 .../composables/router/useRouteQuery.spec.ts  |  4 +--
 .../web-runtime/src/layouts/Application.vue   |  4 +--
 .../src/services/auth/authService.ts          | 15 ++++----
 21 files changed, 90 insertions(+), 89 deletions(-)

diff --git a/packages/web-app-files/src/router/utils.ts b/packages/web-app-files/src/router/utils.ts
index 5ec59f08711..98764e13dba 100644
--- a/packages/web-app-files/src/router/utils.ts
+++ b/packages/web-app-files/src/router/utils.ts
@@ -1,6 +1,7 @@
 import { Location } from 'vue-router'
 import { Router } from 'web-pkg/src/types/router'
 import merge from 'lodash-es/merge'
+import { unref } from 'vue'
 
 export interface ActiveRouteDirectorFunc<T extends string> {
   (router: Router, ...comparatives: T[]): boolean
@@ -17,13 +18,14 @@ export const isLocationActive = (
   router: Router,
   ...comparatives: [Location, ...Location[]]
 ): boolean => {
-  const { href: currentHref } = router.resolve(router.currentRoute)
+  const { href: currentHref } = router.resolve(unref(router.currentRoute))
   return comparatives
     .map((comparative) => {
       const { href: comparativeHref } = router.resolve({
         ...comparative
         // ...(comparative.name && { name: resolveRouteName(comparative.name) })
       })
+
       /**
        * Href might be '/' or '#/' if router is not able to resolve the proper path.
        * This happens if the we don't pass a param which is defined in the route configuration, for example:
diff --git a/packages/web-app-files/src/search/sdk/preview.ts b/packages/web-app-files/src/search/sdk/preview.ts
index 009fc05edeb..9a256001456 100644
--- a/packages/web-app-files/src/search/sdk/preview.ts
+++ b/packages/web-app-files/src/search/sdk/preview.ts
@@ -3,7 +3,7 @@ import PreviewComponent from '../../components/Search/Preview.vue'
 import { clientService } from 'web-pkg/src/services'
 import { buildResource } from 'web-client/src/helpers'
 import { Cache } from 'web-pkg/src/helpers/cache'
-import { Component } from 'vue'
+import { Component, unref } from 'vue'
 import { Router } from 'vue-router'
 import { DavProperties } from 'web-client/src/webdav/constants'
 import { Store } from 'vuex'
@@ -63,6 +63,6 @@ export default class Preview implements SearchPreview {
   }
 
   public get available(): boolean {
-    return this.router.currentRoute.name !== 'search-provider-list'
+    return unref(this.router.currentRoute).name !== 'search-provider-list'
   }
 }
diff --git a/packages/web-app-files/src/services/folder/loaderSpace.ts b/packages/web-app-files/src/services/folder/loaderSpace.ts
index b9024d50f70..fd5a3fa7815 100644
--- a/packages/web-app-files/src/services/folder/loaderSpace.ts
+++ b/packages/web-app-files/src/services/folder/loaderSpace.ts
@@ -97,7 +97,7 @@ export class FolderLoaderSpace implements FolderLoader {
         console.error(error)
 
         if (error.statusCode === 401) {
-          return authService.handleAuthError(router.currentRoute)
+          return authService.handleAuthError(unref(router.currentRoute))
         }
       }
     }).restartable()
diff --git a/packages/web-app-files/src/views/FilesDrop.vue b/packages/web-app-files/src/views/FilesDrop.vue
index 44f0711c877..24e7937ab53 100644
--- a/packages/web-app-files/src/views/FilesDrop.vue
+++ b/packages/web-app-files/src/views/FilesDrop.vue
@@ -40,7 +40,7 @@ import { DavProperties, DavProperty } from 'web-client/src/webdav/constants'
 import { createLocationPublic } from '../router'
 
 import ResourceUpload from '../components/AppBar/Upload/ResourceUpload.vue'
-import { defineComponent, getCurrentInstance, onMounted } from 'vue'
+import { defineComponent, getCurrentInstance, onMounted, unref } from 'vue'
 import { useUpload } from 'web-runtime/src/composables/upload'
 import * as uuid from 'uuid'
 import { usePublicLinkPassword, useStore } from 'web-pkg/src/composables'
@@ -152,7 +152,7 @@ export default defineComponent({
         .catch((error) => {
           // likely missing password, redirect to public link password prompt
           if (error.statusCode === 401) {
-            return this.$authService.handleAuthError(this.$router.currentRoute)
+            return this.$authService.handleAuthError(unref(this.$router.currentRoute))
           }
           console.error(error)
           this.errorMessage = error
diff --git a/packages/web-app-files/tests/unit/router/utils.spec.ts b/packages/web-app-files/tests/unit/router/utils.spec.ts
index f7eb919a555..a77159bff82 100644
--- a/packages/web-app-files/tests/unit/router/utils.spec.ts
+++ b/packages/web-app-files/tests/unit/router/utils.spec.ts
@@ -3,15 +3,16 @@ import {
   isLocationActiveDirector,
   createLocation
 } from '../../../src/router/utils'
-import { Router } from 'vue-router'
+import { RouteLocation, Router } from 'vue-router'
 import { mock } from 'jest-mock-extended'
+import { ref } from 'vue'
 
 describe('utils', () => {
   describe('isLocationActive', () => {
     it('returns true if one location is active', () => {
       const fakeRouter = mock<Router>({
-        currentRoute: { name: 'foo' },
-        resolve: (r) => ({ href: r.name })
+        currentRoute: ref({ name: 'foo' }),
+        resolve: (r: any) => mock<RouteLocation & { href: string }>({ href: r.name })
       })
 
       expect(isLocationActive(fakeRouter, { name: 'foo' })).toBe(true)
@@ -19,10 +20,10 @@ describe('utils', () => {
     })
 
     it('returns false if all locations inactive', () => {
-      const fakeRouter = {
-        currentRoute: { name: 'foo' },
-        resolve: (r) => ({ href: r.name })
-      }
+      const fakeRouter = mock<Router>({
+        currentRoute: ref({ name: 'foo' }),
+        resolve: (r: any) => mock<RouteLocation & { href: string }>({ href: r.name })
+      })
 
       expect(isLocationActive(fakeRouter, { name: 'bar' })).toBe(false)
       expect(isLocationActive(fakeRouter, { name: 'bar' }, { name: 'baz' })).toBe(false)
@@ -32,8 +33,8 @@ describe('utils', () => {
   describe('isLocationActiveDirector', () => {
     test('director can be created and be used to check active locations', () => {
       const fakeRouter = mock<Router>({
-        currentRoute: { name: 'unknown' },
-        resolve: (r) => ({ href: r.name })
+        currentRoute: ref({ name: 'unknown' }),
+        resolve: (r: any) => mock<RouteLocation & { href: string }>({ href: r.name })
       })
 
       const isFilesLocationActive = isLocationActiveDirector(
@@ -43,7 +44,7 @@ describe('utils', () => {
       )
       expect(isFilesLocationActive(fakeRouter)).toBe(false)
 
-      fakeRouter.currentRoute.name = 'bar'
+      fakeRouter.currentRoute.value.name = 'bar'
 
       expect(isFilesLocationActive(fakeRouter)).toBe(true)
       expect(isFilesLocationActive(fakeRouter, 'foo', 'bar')).toBe(true)
@@ -51,8 +52,8 @@ describe('utils', () => {
 
     test('director closure only allows to check known locations and throws if unknown', () => {
       const fakeRouter = mock<Router>({
-        currentRoute: { name: 'baz' },
-        resolve: (r) => ({ href: r.name })
+        currentRoute: ref({ name: 'baz' }),
+        resolve: (r: any) => mock<RouteLocation & { href: string }>({ href: r.name })
       })
 
       const isFilesLocationActive = isLocationActiveDirector({ name: 'foo' }, { name: 'bar' })
diff --git a/packages/web-pkg/src/components/Spaces/QuotaModal.vue b/packages/web-pkg/src/components/Spaces/QuotaModal.vue
index 7a19385d9e7..3627175209f 100644
--- a/packages/web-pkg/src/components/Spaces/QuotaModal.vue
+++ b/packages/web-pkg/src/components/Spaces/QuotaModal.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, unref } from 'vue'
 import { mapActions, mapMutations } from 'vuex'
 import { useGraphClient } from 'web-pkg/src/composables'
 import QuotaSelect from 'web-pkg/src/components/QuotaSelect.vue'
@@ -77,7 +77,7 @@ export default defineComponent({
         .updateDrive(this.space.id, { quota: { total: this.selectedOption } }, {})
         .then(({ data }) => {
           this.cancel()
-          if (this.$router.currentRoute.name === 'admin-settings-spaces') {
+          if (unref(this.$router.currentRoute).name === 'admin-settings-spaces') {
             this.$emit('spaceQuotaUpdated', data.quota)
           }
           this.UPDATE_SPACE_FIELD({
diff --git a/packages/web-pkg/src/composables/router/useFileRouteReplace.ts b/packages/web-pkg/src/composables/router/useFileRouteReplace.ts
index ffde3f9b2fe..19564a9ab47 100644
--- a/packages/web-pkg/src/composables/router/useFileRouteReplace.ts
+++ b/packages/web-pkg/src/composables/router/useFileRouteReplace.ts
@@ -4,6 +4,7 @@ import { Resource, SpaceResource } from 'web-client/src/helpers'
 import { createFileRouteOptions, mergeFileRouteOptions } from '../../helpers/router'
 import Router from 'vue-router'
 import { ConfigurationManager } from '../../configuration'
+import { unref } from 'vue'
 
 export interface FileRouteReplaceOptions {
   router?: Router
@@ -33,7 +34,7 @@ export const useFileRouteReplace = (options: FileRouteReplaceOptions = {}) => {
     }
 
     const routeOptions = mergeFileRouteOptions(
-      router.currentRoute,
+      unref(router.currentRoute),
       createFileRouteOptions(space, resource, {
         configurationManager
       })
diff --git a/packages/web-pkg/src/composables/router/useRoute.ts b/packages/web-pkg/src/composables/router/useRoute.ts
index f8700e087b2..765a0cc6e20 100644
--- a/packages/web-pkg/src/composables/router/useRoute.ts
+++ b/packages/web-pkg/src/composables/router/useRoute.ts
@@ -1,12 +1,8 @@
-import { ref, Ref } from 'vue'
+import { Ref } from 'vue'
 import { useRouter } from './useRouter'
-import { Route } from 'vue-router'
+import { RouteLocationNormalizedLoaded } from 'vue-router'
 
-export const useRoute = (): Ref<Route> => {
+export const useRoute = (): Ref<RouteLocationNormalizedLoaded> => {
   const router = useRouter()
-  const currentRoute = ref()
-  currentRoute.value = router.currentRoute
-  router.afterEach((to) => (currentRoute.value = { ...to }))
-
-  return currentRoute
+  return useRouter().currentRoute
 }
diff --git a/packages/web-pkg/src/composables/router/useRouteMeta.ts b/packages/web-pkg/src/composables/router/useRouteMeta.ts
index eb57fd45cbb..dd08cd0146e 100644
--- a/packages/web-pkg/src/composables/router/useRouteMeta.ts
+++ b/packages/web-pkg/src/composables/router/useRouteMeta.ts
@@ -3,5 +3,5 @@ import { useRoute } from './useRoute'
 
 export const useRouteMeta = (key: string, defaultValue?: string): Ref<string> => {
   const route = useRoute()
-  return computed(() => unref(route).meta[key] || defaultValue)
+  return computed(() => (unref(route).meta[key] as string) || defaultValue)
 }
diff --git a/packages/web-pkg/src/composables/router/useRouteParam.ts b/packages/web-pkg/src/composables/router/useRouteParam.ts
index 4be616d21b6..db231710bc6 100644
--- a/packages/web-pkg/src/composables/router/useRouteParam.ts
+++ b/packages/web-pkg/src/composables/router/useRouteParam.ts
@@ -1,30 +1,25 @@
-import { customRef, Ref } from 'vue'
+import { computed, Ref, unref } from 'vue'
 import { useRouter } from './useRouter'
 import { ParamValue } from './types'
+import { queryItemAsString } from '../appDefaults'
 
 export const useRouteParam = (name: string, defaultValue?: ParamValue): Ref<ParamValue> => {
   const router = useRouter()
 
-  return customRef<ParamValue>((track, trigger) => {
-    router.afterEach((to, from) => to.params[name] !== from.params[name] && trigger())
-
-    return {
-      get() {
-        track()
-        return router.currentRoute.params[name] || defaultValue
-      },
-      async set(v) {
-        if (router.currentRoute.params[name] === v) {
-          return
-        }
-        await router.replace({
-          params: {
-            ...router.currentRoute.params,
-            [name]: v
-          }
-        })
-        trigger()
+  return computed({
+    get() {
+      return queryItemAsString(unref(router.currentRoute).params[name]) || defaultValue
+    },
+    async set(v) {
+      if (unref(router.currentRoute).params[name] === v) {
+        return
       }
+      await router.replace({
+        params: {
+          ...unref(router.currentRoute).params,
+          [name]: v
+        }
+      })
     }
   })
 }
diff --git a/packages/web-pkg/src/composables/router/useRouteQuery.ts b/packages/web-pkg/src/composables/router/useRouteQuery.ts
index 19b57d71a1a..198d596237c 100644
--- a/packages/web-pkg/src/composables/router/useRouteQuery.ts
+++ b/packages/web-pkg/src/composables/router/useRouteQuery.ts
@@ -1,30 +1,24 @@
-import { customRef, Ref } from 'vue'
+import { computed, Ref, unref } from 'vue'
 import { useRouter } from './useRouter'
 import { QueryValue } from './types'
 
 export const useRouteQuery = (name: string, defaultValue?: QueryValue): Ref<QueryValue> => {
   const router = useRouter()
 
-  return customRef<QueryValue>((track, trigger) => {
-    router.afterEach((to, from) => to.query[name] !== from.query[name] && trigger())
-
-    return {
-      get() {
-        track()
-        return router.currentRoute.query[name] || defaultValue
-      },
-      async set(v) {
-        if (router.currentRoute.query[name] === v) {
-          return
-        }
-        await router.replace({
-          query: {
-            ...router.currentRoute.query,
-            [name]: v
-          }
-        })
-        trigger()
+  return computed({
+    get() {
+      return unref(router.currentRoute).query[name] || defaultValue
+    },
+    async set(v) {
+      if (unref(router.currentRoute).query[name] === v) {
+        return
       }
+      await router.replace({
+        query: {
+          ...unref(router.currentRoute).query,
+          [name]: v
+        }
+      })
     }
   })
 }
diff --git a/packages/web-pkg/src/mixins/spaces/delete.ts b/packages/web-pkg/src/mixins/spaces/delete.ts
index 16e4d013b38..cea0556b750 100644
--- a/packages/web-pkg/src/mixins/spaces/delete.ts
+++ b/packages/web-pkg/src/mixins/spaces/delete.ts
@@ -1,3 +1,4 @@
+import { unref } from 'vue'
 import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
 import { clientService, eventBus } from 'web-pkg/src/services'
 
@@ -72,7 +73,7 @@ export default {
           this.hideModal()
           this.REMOVE_FILES([{ id: space.id }])
           this.REMOVE_SPACE({ id: space.id })
-          if (this.$router.currentRoute.name === 'admin-settings-spaces') {
+          if (unref(this.$router.currentRoute).name === 'admin-settings-spaces') {
             eventBus.publish('app.admin-settings.list.load')
           }
           this.showMessage({
diff --git a/packages/web-pkg/src/mixins/spaces/disable.ts b/packages/web-pkg/src/mixins/spaces/disable.ts
index caad653c788..1128eda4682 100644
--- a/packages/web-pkg/src/mixins/spaces/disable.ts
+++ b/packages/web-pkg/src/mixins/spaces/disable.ts
@@ -1,6 +1,7 @@
 import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
 import { clientService } from 'web-pkg/src/services'
 import { SpaceResource } from 'web-client'
+import { unref } from 'vue'
 
 export default {
   computed: {
@@ -72,7 +73,8 @@ export default {
         .deleteDrive(space.id.toString())
         .then(() => {
           this.hideModal()
-          if (this.$router.currentRoute.name === 'admin-settings-spaces') {
+          const currentRoute = unref(this.$router.currentRoute)
+          if (currentRoute.name === 'admin-settings-spaces') {
             space.disabled = true
             space.spaceQuota = { total: space.spaceQuota.total }
           }
@@ -84,10 +86,10 @@ export default {
           this.showMessage({
             title: this.$gettext('Space was disabled successfully')
           })
-          if (this.$router.currentRoute.name === 'files-spaces-projects') {
+          if (currentRoute.name === 'files-spaces-projects') {
             return
           }
-          if (this.$router.currentRoute.name === 'files-spaces-generic') {
+          if (currentRoute.name === 'files-spaces-generic') {
             return this.$router.push({ name: 'files-spaces-projects' })
           }
         })
diff --git a/packages/web-pkg/src/mixins/spaces/editDescription.ts b/packages/web-pkg/src/mixins/spaces/editDescription.ts
index 2e163a4f2e6..046c98e2e30 100644
--- a/packages/web-pkg/src/mixins/spaces/editDescription.ts
+++ b/packages/web-pkg/src/mixins/spaces/editDescription.ts
@@ -1,6 +1,7 @@
 import { mapActions, mapGetters, mapMutations } from 'vuex'
 import { clientService } from 'web-pkg/src/services'
 import { Drive } from 'web-client/src/generated'
+import { unref } from 'vue'
 
 export default {
   computed: {
@@ -72,7 +73,7 @@ export default {
             field: 'description',
             value: description
           })
-          if (this.$router.currentRoute.name === 'admin-settings-spaces') {
+          if (unref(this.$router.currentRoute).name === 'admin-settings-spaces') {
             space.description = description
           }
           this.showMessage({
diff --git a/packages/web-pkg/src/mixins/spaces/navigate.ts b/packages/web-pkg/src/mixins/spaces/navigate.ts
index d808bb3ce49..49c7b238827 100644
--- a/packages/web-pkg/src/mixins/spaces/navigate.ts
+++ b/packages/web-pkg/src/mixins/spaces/navigate.ts
@@ -1,3 +1,5 @@
+import { unref } from 'vue'
+
 export default {
   computed: {
     $_navigate_space_items() {
@@ -13,7 +15,7 @@ export default {
             if (resources.length) {
               return false
             }
-            if (this.$router.currentRoute.name !== 'files-trash-generic') {
+            if (unref(this.$router.currentRoute).name !== 'files-trash-generic') {
               return false
             }
             return this.space?.driveType !== 'personal'
diff --git a/packages/web-pkg/src/mixins/spaces/rename.ts b/packages/web-pkg/src/mixins/spaces/rename.ts
index 28ef1b7cb8a..8dacec22ff6 100644
--- a/packages/web-pkg/src/mixins/spaces/rename.ts
+++ b/packages/web-pkg/src/mixins/spaces/rename.ts
@@ -1,3 +1,4 @@
+import { unref } from 'vue'
 import { mapActions, mapGetters, mapMutations } from 'vuex'
 import { clientService } from 'web-pkg/src/services'
 
@@ -82,7 +83,7 @@ export default {
         .updateDrive(space.id, { name }, {})
         .then(() => {
           this.hideModal()
-          if (this.$router.currentRoute.name === 'admin-settings-spaces') {
+          if (unref(this.$router.currentRoute).name === 'admin-settings-spaces') {
             space.name = name
           }
           this.UPDATE_SPACE_FIELD({
diff --git a/packages/web-pkg/src/mixins/spaces/restore.ts b/packages/web-pkg/src/mixins/spaces/restore.ts
index d7d91b34a44..2d54a048494 100644
--- a/packages/web-pkg/src/mixins/spaces/restore.ts
+++ b/packages/web-pkg/src/mixins/spaces/restore.ts
@@ -1,6 +1,7 @@
 import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
 import { clientService } from 'web-pkg/src/services'
 import { SpaceResource } from 'web-client'
+import { unref } from 'vue'
 
 export default {
   computed: {
@@ -78,7 +79,7 @@ export default {
         )
         .then((updatedSpace) => {
           this.hideModal()
-          if (this.$router.currentRoute.name === 'admin-settings-spaces') {
+          if (unref(this.$router.currentRoute).name === 'admin-settings-spaces') {
             space.disabled = false
             space.spaceQuota = updatedSpace.data.quota
           }
diff --git a/packages/web-pkg/src/mixins/spaces/setReadme.ts b/packages/web-pkg/src/mixins/spaces/setReadme.ts
index acb8d009e36..fddde2917b7 100644
--- a/packages/web-pkg/src/mixins/spaces/setReadme.ts
+++ b/packages/web-pkg/src/mixins/spaces/setReadme.ts
@@ -1,3 +1,4 @@
+import { unref } from 'vue'
 import { mapMutations, mapState, mapActions } from 'vuex'
 
 export default {
@@ -21,7 +22,7 @@ export default {
             if (!resources[0].mimeType?.startsWith('text/')) {
               return false
             }
-            if (this.$router.currentRoute.name !== 'files-spaces-generic') {
+            if (unref(this.$router.currentRoute).name !== 'files-spaces-generic') {
               return false
             }
 
diff --git a/packages/web-pkg/tests/unit/composables/router/useRouteQuery.spec.ts b/packages/web-pkg/tests/unit/composables/router/useRouteQuery.spec.ts
index a3e4b2f64b9..b0664839de2 100644
--- a/packages/web-pkg/tests/unit/composables/router/useRouteQuery.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/router/useRouteQuery.spec.ts
@@ -1,5 +1,5 @@
 import { useRouteQuery } from 'web-pkg/src/composables'
-import { Ref, nextTick, computed, ComputedRef } from 'vue'
+import { Ref, nextTick, computed, ComputedRef, unref } from 'vue'
 import { getComposableWrapper, createRouter } from 'web-test-helpers'
 
 describe('useRouteQuery', () => {
@@ -123,7 +123,7 @@ describe('useRouteQuery', () => {
         expect(fooQuery.value).toBeUndefined()
 
         fooQuery.value = 'changedThroughRef'
-        expect(router.currentRoute.query.foo).toBe('changedThroughRef')
+        expect(unref(router.currentRoute).query.foo).toBe('changedThroughRef')
       },
       { mocks }
     )
diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue
index bfc10c05898..258a8a4187b 100644
--- a/packages/web-runtime/src/layouts/Application.vue
+++ b/packages/web-runtime/src/layouts/Application.vue
@@ -59,8 +59,8 @@ export default defineComponent({
     watch(
       useRoute(),
       (route) => {
-        if (route.matched.length) {
-          route.matched.forEach((match) => {
+        if (unref(route).matched.length) {
+          unref(route).matched.forEach((match) => {
             const keys = Object.keys(match.components).filter((key) => key !== 'default')
             if (keys.length) {
               console.warn(
diff --git a/packages/web-runtime/src/services/auth/authService.ts b/packages/web-runtime/src/services/auth/authService.ts
index 4be1cee442b..9a1b4e0350a 100644
--- a/packages/web-runtime/src/services/auth/authService.ts
+++ b/packages/web-runtime/src/services/auth/authService.ts
@@ -5,6 +5,7 @@ import { ClientService } from 'web-pkg/src/services'
 import { ConfigurationManager } from 'web-pkg/src/configuration'
 import { Route, Router } from 'vue-router'
 import { extractPublicLinkToken, isPublicLinkContext, isUserContext } from '../../router'
+import { unref } from 'vue'
 
 export class AuthService {
   private clientService: ClientService
@@ -63,7 +64,7 @@ export class AuthService {
       this.userManager.events.addAccessTokenExpired((...args): void => {
         const handleExpirationError = () => {
           console.error('AccessToken Expired：', ...args)
-          this.handleAuthError(this.router.currentRoute)
+          this.handleAuthError(unref(this.router.currentRoute))
         }
 
         /**
@@ -99,7 +100,7 @@ export class AuthService {
           await this.userManager.updateContext(user.access_token)
         } catch (e) {
           console.error(e)
-          await this.handleAuthError(this.router.currentRoute)
+          await this.handleAuthError(unref(this.router.currentRoute))
         }
       })
 
@@ -123,7 +124,7 @@ export class AuthService {
       })
       this.userManager.events.addSilentRenewError(async (error) => {
         console.error('Silent Renew Error：', error)
-        await this.handleAuthError(this.router.currentRoute)
+        await this.handleAuthError(unref(this.router.currentRoute))
       })
     }
 
@@ -135,7 +136,7 @@ export class AuthService {
         await this.userManager.updateContext(accessToken)
       } catch (e) {
         console.error(e)
-        await this.handleAuthError(this.router.currentRoute)
+        await this.handleAuthError(unref(this.router.currentRoute))
       }
     }
   }
@@ -152,7 +153,9 @@ export class AuthService {
     // craft a url that the parser in oidc-client-ts can handle… this is required for oauth2 logins
     const url =
       '/?' +
-      new URLSearchParams(this.router.currentRoute.query as Record<string, string>).toString()
+      new URLSearchParams(
+        unref(this.router.currentRoute).query as Record<string, string>
+      ).toString()
 
     try {
       await this.userManager.signinRedirectCallback(url)
@@ -161,7 +164,7 @@ export class AuthService {
       return this.router.replace({ path: redirectUrl })
     } catch (e) {
       console.warn('error during authentication:', e)
-      return this.handleAuthError(this.router.currentRoute)
+      return this.handleAuthError(unref(this.router.currentRoute))
     }
   }
 

From 0b3930d0ad6d041e0bd0d44734be1aab114b2a96 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Sat, 14 Jan 2023 14:42:02 +0100
Subject: [PATCH 06/18] Add comment

---
 packages/web-app-files/src/router/utils.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/web-app-files/src/router/utils.ts b/packages/web-app-files/src/router/utils.ts
index 98764e13dba..b608a5b85a4 100644
--- a/packages/web-app-files/src/router/utils.ts
+++ b/packages/web-app-files/src/router/utils.ts
@@ -18,6 +18,8 @@ export const isLocationActive = (
   router: Router,
   ...comparatives: [Location, ...Location[]]
 ): boolean => {
+  // FIXME: router.resolve cleans the path, we don't need it, if we can rely on
+  // router.currentRoute to not have slashs encoded for paths
   const { href: currentHref } = router.resolve(unref(router.currentRoute))
   return comparatives
     .map((comparative) => {

From 624fa5880e1912ef3ebbe3f79c5ee00f6059bdc8 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Sat, 14 Jan 2023 14:47:39 +0100
Subject: [PATCH 07/18] WIP: Adapt patchRouter for new vue-router

---
 .../web-runtime/src/router/patchCleanPath.ts  | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/web-runtime/src/router/patchCleanPath.ts b/packages/web-runtime/src/router/patchCleanPath.ts
index 50db87f9b65..4c811370cfe 100644
--- a/packages/web-runtime/src/router/patchCleanPath.ts
+++ b/packages/web-runtime/src/router/patchCleanPath.ts
@@ -7,25 +7,32 @@ import get from 'lodash-es/get'
 // should immediately go away and be removed after finalizing the update
 // to apply the patch to a route add meta.patchCleanPath = true to it
 // to patch needs to be enabled on a route level, to do so add meta.patchCleanPath = true property to the route
+// c.f. https://github.com/vuejs/router/issues/ 1638
 export const patchRouter = (router: Router) => {
-  const bindMatcher = router.match.bind(router)
+  const bindResolver = router.resolve.bind(router)
   const cleanPath = (route) =>
     [
       ['%2F', '/'],
       ['//', '/']
     ].reduce((path, rule) => path.replaceAll(rule[0], rule[1]), route || '')
 
-  router.match = (raw, current, redirectFrom) => {
-    const bindMatch = bindMatcher(raw, current, redirectFrom)
+  router.resolve = (
+    raw: RouteLocationRaw,
+    currentLocation?: RouteLocationNormalizedLoaded
+  ): RouteLocation & {
+    href: string
+  } => {
+    const bindResolve = bindResolver(raw, currentLocation)
 
-    if (!get(bindMatch, 'meta.patchCleanPath', false)) {
-      return bindMatch
+    if (!get(bindResolve, 'meta.patchCleanPath', false)) {
+      return bindResolve
     }
 
     return {
-      ...bindMatch,
-      path: cleanPath(bindMatch.path),
-      fullPath: cleanPath(bindMatch.fullPath)
+      ...bindResolve,
+      href: cleanPath(bindResolve.href),
+      path: cleanPath(bindResolve.path),
+      fullPath: cleanPath(bindResolve.fullPath)
     }
   }
 

From b4eea87ff47e66a197d5a3aa96fc8909e9b3ec16 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Sat, 14 Jan 2023 14:50:04 +0100
Subject: [PATCH 08/18] Fix TopBar

---
 packages/web-runtime/src/components/Topbar/TopBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-runtime/src/components/Topbar/TopBar.vue b/packages/web-runtime/src/components/Topbar/TopBar.vue
index b7719762c2d..c912248ce7d 100644
--- a/packages/web-runtime/src/components/Topbar/TopBar.vue
+++ b/packages/web-runtime/src/components/Topbar/TopBar.vue
@@ -57,7 +57,7 @@ export default {
     ...mapGetters(['configuration', 'user']),
 
     activeRoutePath() {
-      return this.$router.resolve(this.$route).location.path
+      return this.$router.resolve(this.$route).path
     },
 
     appMenuItems() {

From 93ebaccc164b672a22a2350dfd336cfc82ac4c45 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Sat, 14 Jan 2023 18:13:22 +0100
Subject: [PATCH 09/18] Fix types and tests

---
 .../__snapshots__/OcBreadcrumb.spec.ts.snap   | 16 +++----
 .../tests/unit/components/AppTemplate.spec.ts |  4 +-
 .../web-app-external/tests/unit/app.spec.ts   |  3 +-
 .../composables/upload/useUploadHelpers.ts    |  6 +--
 .../web-app-files/src/helpers/breadcrumbs.ts  |  6 +--
 packages/web-app-files/src/router/common.ts   |  6 +--
 .../web-app-files/src/router/deprecated.ts    | 19 +++++---
 packages/web-app-files/src/router/index.ts    |  5 ++-
 packages/web-app-files/src/router/public.ts   |  6 +--
 packages/web-app-files/src/router/shares.ts   |  6 +--
 packages/web-app-files/src/router/spaces.ts   |  6 +--
 packages/web-app-files/src/router/trash.ts    |  6 +--
 packages/web-app-files/src/router/utils.ts    | 14 +++---
 packages/web-app-files/src/services/folder.ts |  2 +-
 .../src/services/folder/loaderFavorites.ts    |  2 +-
 .../services/folder/loaderSharedViaLink.ts    |  2 +-
 .../src/services/folder/loaderSharedWithMe.ts |  2 +-
 .../services/folder/loaderSharedWithOthers.ts |  2 +-
 .../unit/components/AppBar/AppBar.spec.ts     |  7 +--
 .../components/AppBar/CreateAndUpload.spec.ts |  5 ++-
 .../AppBar/SharesNavigation.spec.ts           | 17 ++++---
 .../unit/components/SideBar/FileInfo.spec.ts  |  5 ++-
 .../InviteCollaboratorForm.spec.ts            |  6 ++-
 .../SideBar/Shares/FileShares.spec.ts         |  7 ++-
 .../SideBar/Shares/SpaceMembers.spec.ts       |  7 ++-
 .../unit/components/SideBar/SideBar.spec.ts   |  5 ++-
 .../Spaces/SpaceContextActions.spec.ts        |  6 ++-
 .../driveResolver/useDriveResolver.spec.ts    | 23 +++++++---
 .../composables/scrollTo/useScrollTo.spec.ts  | 14 +++---
 .../upload/useUploadHelpers.spec.ts           |  7 +--
 .../unit/mixins/actions/acceptShare.spec.ts   |  7 ++-
 .../tests/unit/mixins/actions/delete.spec.ts  |  6 ++-
 .../tests/unit/mixins/spaces/setImage.spec.ts |  9 ++--
 .../unit/mixins/spaces/uploadImage.spec.ts    |  9 ++--
 .../tests/unit/router/utils.spec.ts           | 45 +++++++++++++------
 .../tests/unit/search/sdk.spec.ts             |  5 ++-
 .../tests/unit/views/Favorites.spec.ts        |  5 ++-
 .../tests/unit/views/FilesDrop.spec.ts        |  6 ++-
 .../unit/views/shares/SharedViaLink.spec.ts   |  7 +--
 .../unit/views/shares/SharedWithMe.spec.ts    |  6 +--
 .../views/shares/SharedWithOthers.spec.ts     |  6 +--
 .../unit/views/spaces/DriveResolver.spec.ts   | 10 +++--
 .../unit/views/spaces/GenericSpace.spec.ts    |  5 ++-
 .../unit/views/spaces/GenericTrash.spec.ts    |  7 +--
 .../tests/unit/views/spaces/Projects.spec.ts  |  7 +--
 .../src/composables/appDefaults/types.ts      |  5 ++-
 .../appDefaults/useAppDocumentTitle.ts        |  6 +--
 .../appDefaults/useAppFolderHandling.ts       |  4 +-
 .../appDefaults/useAppNavigation.ts           |  8 ++--
 .../src/composables/authContext/useRequest.ts |  5 +--
 .../web-pkg/src/composables/router/types.ts   |  1 -
 .../src/composables/router/useActiveApp.ts    |  5 ++-
 .../composables/router/useFileRouteReplace.ts |  2 +-
 .../src/composables/router/useRouteName.ts    |  2 +-
 .../src/composables/router/useRouteQuery.ts   |  1 +
 .../src/helpers/router/routeOptions.ts        | 12 ++---
 .../composables/router/useRouteQuery.spec.ts  | 35 ++++++++++-----
 .../tests/unit/mixins/spaces/delete.spec.ts   |  9 ++--
 .../tests/unit/mixins/spaces/disable.spec.ts  |  9 ++--
 .../mixins/spaces/editDescription.spec.ts     |  9 ++--
 .../tests/unit/mixins/spaces/navigate.spec.ts |  6 ++-
 .../tests/unit/mixins/spaces/rename.spec.ts   |  9 ++--
 .../tests/unit/mixins/spaces/restore.spec.ts  |  9 ++--
 .../unit/mixins/spaces/setReadme.spec.ts      |  9 ++--
 packages/web-runtime/src/container/api.ts     | 12 ++---
 packages/web-runtime/src/container/types.ts   |  6 +--
 packages/web-runtime/src/router/helpers.ts    | 44 ++++++++++--------
 packages/web-runtime/src/router/index.ts      |  2 +-
 .../web-runtime/src/router/setupAuthGuard.ts  |  4 +-
 .../src/services/auth/authService.ts          |  6 +--
 .../tests/unit/router/index.spec.ts           |  2 +
 packages/web-test-helpers/src/helpers.ts      | 11 ++++-
 .../src/mocks/defaultComponentMocks.ts        | 16 +++----
 tests/unit/config/jest.init.js                |  7 +--
 74 files changed, 381 insertions(+), 237 deletions(-)

diff --git a/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap b/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap
index 57edbec70e2..b47e417a253 100644
--- a/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap
+++ b/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`OcBreadcrumb displays all items 1`] = `
 <nav class="oc-breadcrumb oc-breadcrumb-default">
   <ol class="oc-breadcrumb-list oc-flex oc-m-rm oc-p-rm">
     <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
-      <router-link-stub ariacurrentvalue="page" event="click" tag="a" to="[object Object]">
+      <router-link-stub tag="a" to="[object Object]">
         <span>First folder</span>
       </router-link-stub>
       <oc-icon-stub accessiblelabel="" class="oc-mx-xs" color="var(--oc-color-text-default)" filltype="line" name="arrow-right-s" size="medium" type="span" variation="passive"></oc-icon-stub>
@@ -18,7 +18,7 @@ exports[`OcBreadcrumb displays all items 1`] = `
       <!--v-if-->
     </li>
     <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
-      <router-link-stub ariacurrentvalue="page" event="click" tag="a" to="[object Object]">
+      <router-link-stub tag="a" to="[object Object]">
         <span>Deep</span>
       </router-link-stub>
       <oc-icon-stub accessiblelabel="" class="oc-mx-xs" color="var(--oc-color-text-default)" filltype="line" name="arrow-right-s" size="medium" type="span" variation="passive"></oc-icon-stub>
@@ -38,13 +38,13 @@ exports[`OcBreadcrumb displays all items 1`] = `
     <oc-drop-stub dropid="oc-drop-2" mode="click" paddingsize="medium" position="bottom-start" toggle="">
       <ol>
         <li>
-          <router-link-stub ariacurrentvalue="page" event="click" tag="a" to="[object Object]">Deep</router-link-stub>
+          <router-link-stub tag="a" to="[object Object]">Deep</router-link-stub>
         </li>
         <li>
           <oc-button-stub appearance="raw" gapsize="medium" justifycontent="left" size="medium" submit="button" type="button" variation="passive">Subfolder</oc-button-stub>
         </li>
         <li>
-          <router-link-stub ariacurrentvalue="page" event="click" tag="a" to="[object Object]">First folder</router-link-stub>
+          <router-link-stub tag="a" to="[object Object]">First folder</router-link-stub>
         </li>
       </ol>
     </oc-drop-stub>
@@ -56,7 +56,7 @@ exports[`OcBreadcrumb sets correct variation 1`] = `
 <nav class="oc-breadcrumb oc-breadcrumb-lead">
   <ol class="oc-breadcrumb-list oc-flex oc-m-rm oc-p-rm">
     <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
-      <router-link-stub ariacurrentvalue="page" event="click" tag="a" to="[object Object]">
+      <router-link-stub tag="a" to="[object Object]">
         <span>First folder</span>
       </router-link-stub>
       <oc-icon-stub accessiblelabel="" class="oc-mx-xs" color="var(--oc-color-text-default)" filltype="line" name="arrow-right-s" size="medium" type="span" variation="passive"></oc-icon-stub>
@@ -70,7 +70,7 @@ exports[`OcBreadcrumb sets correct variation 1`] = `
       <!--v-if-->
     </li>
     <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
-      <router-link-stub ariacurrentvalue="page" event="click" tag="a" to="[object Object]">
+      <router-link-stub tag="a" to="[object Object]">
         <span>Deep</span>
       </router-link-stub>
       <oc-icon-stub accessiblelabel="" class="oc-mx-xs" color="var(--oc-color-text-default)" filltype="line" name="arrow-right-s" size="medium" type="span" variation="passive"></oc-icon-stub>
@@ -90,13 +90,13 @@ exports[`OcBreadcrumb sets correct variation 1`] = `
     <oc-drop-stub dropid="oc-drop-1" mode="click" paddingsize="medium" position="bottom-start" toggle="">
       <ol>
         <li>
-          <router-link-stub ariacurrentvalue="page" event="click" tag="a" to="[object Object]">Deep</router-link-stub>
+          <router-link-stub tag="a" to="[object Object]">Deep</router-link-stub>
         </li>
         <li>
           <oc-button-stub appearance="raw" gapsize="medium" justifycontent="left" size="medium" submit="button" type="button" variation="passive">Subfolder</oc-button-stub>
         </li>
         <li>
-          <router-link-stub ariacurrentvalue="page" event="click" tag="a" to="[object Object]">First folder</router-link-stub>
+          <router-link-stub tag="a" to="[object Object]">First folder</router-link-stub>
         </li>
       </ol>
     </oc-drop-stub>
diff --git a/packages/web-app-admin-settings/tests/unit/components/AppTemplate.spec.ts b/packages/web-app-admin-settings/tests/unit/components/AppTemplate.spec.ts
index 7f5ce052e25..acfdd0d7e17 100644
--- a/packages/web-app-admin-settings/tests/unit/components/AppTemplate.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/AppTemplate.spec.ts
@@ -4,10 +4,12 @@ import {
   defaultComponentMocks,
   defaultPlugins,
   defaultStoreMockOptions,
+  RouteLocation,
   shallowMount
 } from 'web-test-helpers'
 import { eventBus } from 'web-pkg'
 import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
+import { mock } from 'jest-mock-extended'
 
 const stubSelectors = {
   ocBreadcrumb: 'oc-breadcrumb-stub',
@@ -135,7 +137,7 @@ function getWrapper({ propsData = {} } = {}) {
         mocks: {
           ...defaultComponentMocks({
             gettext: false,
-            currentRoute: { query: { app: 'admin-settings' } }
+            currentRoute: mock<RouteLocation>({ query: { app: 'admin-settings' } })
           })
         }
       }
diff --git a/packages/web-app-external/tests/unit/app.spec.ts b/packages/web-app-external/tests/unit/app.spec.ts
index b2b8bd22a67..348d280796f 100644
--- a/packages/web-app-external/tests/unit/app.spec.ts
+++ b/packages/web-app-external/tests/unit/app.spec.ts
@@ -10,6 +10,7 @@ import { FileContext, useAppDefaults } from 'web-pkg/src/composables/appDefaults
 import { useAppDefaultsMock } from 'web-test-helpers/src/mocks/useAppDefaultsMock'
 import { ref } from 'vue'
 import { mock } from 'jest-mock-extended'
+import { RouteLocation } from 'web-test-helpers'
 
 jest.mock('web-pkg/src/composables/appDefaults', () => {
   const { queryItemAsString } = jest.requireActual('web-pkg/src/composables/appDefaults')
@@ -145,7 +146,7 @@ function createShallowMountWrapper(makeRequest = jest.fn().mockResolvedValue({ s
         mocks: {
           ...defaultComponentMocks({
             gettext: false,
-            currentRoute: { query: { app: 'exampleApp' } }
+            currentRoute: mock<RouteLocation>({ query: { app: 'exampleApp' } })
           })
         }
       }
diff --git a/packages/web-app-files/src/composables/upload/useUploadHelpers.ts b/packages/web-app-files/src/composables/upload/useUploadHelpers.ts
index 6a1ac086812..ab9388c640d 100644
--- a/packages/web-app-files/src/composables/upload/useUploadHelpers.ts
+++ b/packages/web-app-files/src/composables/upload/useUploadHelpers.ts
@@ -1,4 +1,4 @@
-import { Route } from 'vue-router'
+import { RouteLocation } from 'vue-router'
 import { UppyResource } from 'web-runtime/src/composables/upload'
 import { useRoute } from 'web-pkg/src/composables'
 import { ComputedRef, Ref, unref } from 'vue'
@@ -20,7 +20,7 @@ interface UploadHelpersResult {
 
 interface inputFileOptions {
   uppyService: UppyService
-  route: Ref<Route>
+  route: Ref<RouteLocation>
   space: Ref<SpaceResource>
   currentFolder: Ref<string>
   currentFolderId?: Ref<string | number>
@@ -108,7 +108,7 @@ const inputFilesToUppyFiles = ({
           uploadId: uuid.v4(),
           topLevelFolderId,
           // route data
-          routeName: name,
+          routeName: name as string,
           routeDriveAliasAndItem: (params as any)?.driveAliasAndItem || '',
           routeShareId: (query as any)?.shareId || ''
         }
diff --git a/packages/web-app-files/src/helpers/breadcrumbs.ts b/packages/web-app-files/src/helpers/breadcrumbs.ts
index 6e6175b8a88..e2f5587f304 100644
--- a/packages/web-app-files/src/helpers/breadcrumbs.ts
+++ b/packages/web-app-files/src/helpers/breadcrumbs.ts
@@ -1,16 +1,16 @@
 import { eventBus } from 'web-pkg/src/services/eventBus'
-import { Location } from 'vue-router'
+import { RouteLocation } from 'vue-router'
 import omit from 'lodash-es/omit'
 
 export interface BreadcrumbItem {
   text: string
-  to?: Location
+  to?: RouteLocation
   allowContextActions?: boolean
   onClick?: () => void
 }
 
 export const breadcrumbsFromPath = (
-  currentRoute: Location,
+  currentRoute: RouteLocation,
   resourcePath: string
 ): BreadcrumbItem[] => {
   const pathSplit = (p = '') => p.split('/').filter(Boolean)
diff --git a/packages/web-app-files/src/router/common.ts b/packages/web-app-files/src/router/common.ts
index 74e22b9ddb6..54a31959d52 100644
--- a/packages/web-app-files/src/router/common.ts
+++ b/packages/web-app-files/src/router/common.ts
@@ -1,10 +1,10 @@
 import { RouteComponents } from './router'
-import { Location, RouteConfig } from 'vue-router'
+import { RouteLocationNamedRaw, RouteRecordRaw } from 'vue-router'
 import { createLocation, $gettext, isLocationActiveDirector } from './utils'
 
 type commonTypes = 'files-common-favorites' | 'files-common-search'
 
-export const createLocationCommon = (name: commonTypes, location = {}): Location =>
+export const createLocationCommon = (name: commonTypes, location = {}): RouteLocationNamedRaw =>
   createLocation(name, location)
 
 export const locationFavorites = createLocationCommon('files-common-favorites')
@@ -15,7 +15,7 @@ export const isLocationCommonActive = isLocationActiveDirector<commonTypes>(
   locationSearch
 )
 
-export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
+export const buildRoutes = (components: RouteComponents): RouteRecordRaw[] => [
   {
     path: '/search',
     component: components.App,
diff --git a/packages/web-app-files/src/router/deprecated.ts b/packages/web-app-files/src/router/deprecated.ts
index 8c7761f7856..4c7e3702989 100644
--- a/packages/web-app-files/src/router/deprecated.ts
+++ b/packages/web-app-files/src/router/deprecated.ts
@@ -1,4 +1,11 @@
-import { RouteConfig, Route, Location, RouteMeta, Router } from 'vue-router'
+import {
+  RouteRecordRaw,
+  RouteLocationNamedRaw,
+  RouteMeta,
+  Router,
+  RouteLocationPathRaw,
+  RouteLocationRaw
+} from 'vue-router'
 import { createLocationSpaces } from './spaces'
 import { createLocationShares } from './shares'
 import { createLocationCommon } from './common'
@@ -16,8 +23,8 @@ import { urlJoin } from 'web-client/src/utils'
 const deprecatedRedirect = (routeConfig: {
   path: string
   meta?: RouteMeta
-  redirect: (to: Route) => Location
-}): RouteConfig => {
+  redirect: (to: RouteLocationRaw) => Partial<RouteLocationPathRaw & RouteLocationNamedRaw>
+}): RouteRecordRaw => {
   return {
     meta: { ...routeConfig.meta, authContext: 'anonymous' }, // authContext belongs to the redirect target, not to the redirect itself.
     path: routeConfig.path,
@@ -26,7 +33,7 @@ const deprecatedRedirect = (routeConfig: {
 
       console.warn(
         `route "${routeConfig.path}" is deprecated, use "${
-          location.path || location.name
+          String(location.path) || String(location.name)
         }" instead.`
       )
 
@@ -39,7 +46,7 @@ const deprecatedRedirect = (routeConfig: {
  * listed routes only exist to keep backwards compatibility intact,
  * all routes written in  a flat syntax to keep them readable.
  */
-export const buildRoutes = (): RouteConfig[] =>
+export const buildRoutes = (): RouteLocationNamedRaw[] =>
   [
     {
       path: '/list',
@@ -101,7 +108,7 @@ export const buildRoutes = (): RouteConfig[] =>
  */
 export const isLocationActive = (
   router: Router,
-  ...comparatives: [Location, ...Location[]]
+  ...comparatives: [RouteLocationNamedRaw, ...RouteLocationNamedRaw[]]
 ): boolean => {
   const [first, ...rest] = comparatives.map((c) => {
     const newName = {
diff --git a/packages/web-app-files/src/router/index.ts b/packages/web-app-files/src/router/index.ts
index 22ca51f11f2..f4138f78516 100644
--- a/packages/web-app-files/src/router/index.ts
+++ b/packages/web-app-files/src/router/index.ts
@@ -1,4 +1,4 @@
-import { RouteConfig } from 'vue-router'
+import { RouteLocationNamedRaw } from 'vue-router'
 
 import {
   buildRoutes as buildCommonRoutes,
@@ -30,11 +30,12 @@ import {
 import type { ActiveRouteDirectorFunc } from './utils'
 
 const ROOT_ROUTE = {
+  name: 'root',
   path: '/',
   redirect: (to) => createLocationSpaces('files-spaces-generic', to)
 }
 
-const buildRoutes = (components: RouteComponents): RouteConfig[] => [
+const buildRoutes = (components: RouteComponents): RouteLocationNamedRaw[] => [
   ROOT_ROUTE,
   ...buildCommonRoutes(components),
   ...buildSharesRoutes(components),
diff --git a/packages/web-app-files/src/router/public.ts b/packages/web-app-files/src/router/public.ts
index 5e6e76f13d9..911537f1e18 100644
--- a/packages/web-app-files/src/router/public.ts
+++ b/packages/web-app-files/src/router/public.ts
@@ -1,10 +1,10 @@
 import { RouteComponents } from './router'
-import { Location, RouteConfig } from 'vue-router'
+import { RouteLocationNamedRaw, RouteRecordRaw } from 'vue-router'
 import { createLocation, isLocationActiveDirector, $gettext } from './utils'
 
 type shareTypes = 'files-public-link' | 'files-public-upload'
 
-export const createLocationPublic = (name: shareTypes, location = {}): Location =>
+export const createLocationPublic = (name: shareTypes, location = {}): RouteLocationNamedRaw =>
   createLocation(name, location)
 
 export const locationPublicLink = createLocationPublic('files-public-link')
@@ -15,7 +15,7 @@ export const isLocationPublicActive = isLocationActiveDirector<shareTypes>(
   locationPublicUpload
 )
 
-export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
+export const buildRoutes = (components: RouteComponents): RouteRecordRaw[] => [
   {
     path: '/link',
     component: components.App,
diff --git a/packages/web-app-files/src/router/shares.ts b/packages/web-app-files/src/router/shares.ts
index a4f1c87cc4a..ddd768421c1 100644
--- a/packages/web-app-files/src/router/shares.ts
+++ b/packages/web-app-files/src/router/shares.ts
@@ -1,10 +1,10 @@
 import { RouteComponents } from './router'
-import { Location, RouteConfig } from 'vue-router'
+import { RouteLocationNamedRaw, RouteRecordRaw } from 'vue-router'
 import { createLocation, isLocationActiveDirector, $gettext } from './utils'
 
 type shareTypes = 'files-shares-with-me' | 'files-shares-with-others' | 'files-shares-via-link'
 
-export const createLocationShares = (name: shareTypes, location = {}): Location =>
+export const createLocationShares = (name: shareTypes, location = {}): RouteLocationNamedRaw =>
   createLocation(name, location)
 
 export const locationSharesWithMe = createLocationShares('files-shares-with-me')
@@ -17,7 +17,7 @@ export const isLocationSharesActive = isLocationActiveDirector<shareTypes>(
   locationSharesViaLink
 )
 
-export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
+export const buildRoutes = (components: RouteComponents): RouteRecordRaw[] => [
   {
     path: '/shares',
     component: components.App,
diff --git a/packages/web-app-files/src/router/spaces.ts b/packages/web-app-files/src/router/spaces.ts
index cc2acc7f7ae..3f6cafdf647 100644
--- a/packages/web-app-files/src/router/spaces.ts
+++ b/packages/web-app-files/src/router/spaces.ts
@@ -1,10 +1,10 @@
-import { Location, RouteConfig } from 'vue-router'
+import { RouteLocationNamedRaw, RouteRecordRaw } from 'vue-router'
 import { RouteComponents } from './router'
 import { createLocation, isLocationActiveDirector, $gettext } from './utils'
 
 type spaceTypes = 'files-spaces-projects' | 'files-spaces-generic'
 
-export const createLocationSpaces = (name: spaceTypes, location = {}): Location =>
+export const createLocationSpaces = (name: spaceTypes, location = {}): RouteLocationNamedRaw =>
   createLocation(name, location)
 
 export const locationSpacesProjects = createLocationSpaces('files-spaces-projects')
@@ -17,7 +17,7 @@ export const isLocationSpacesActive = isLocationActiveDirector<spaceTypes>(
   locationSpacesGeneric
 )
 
-export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
+export const buildRoutes = (components: RouteComponents): RouteRecordRaw[] => [
   {
     path: '/spaces',
     component: components.App,
diff --git a/packages/web-app-files/src/router/trash.ts b/packages/web-app-files/src/router/trash.ts
index aad4c61c007..0103a44fbd4 100644
--- a/packages/web-app-files/src/router/trash.ts
+++ b/packages/web-app-files/src/router/trash.ts
@@ -1,17 +1,17 @@
 import { RouteComponents } from './router'
-import { Location, RouteConfig } from 'vue-router'
+import { RouteLocationNamedRaw, RouteRecordRaw } from 'vue-router'
 import { createLocation, isLocationActiveDirector } from './utils'
 
 type trashTypes = 'files-trash-generic'
 
-export const createLocationTrash = (name: trashTypes, location = {}): Location =>
+export const createLocationTrash = (name: trashTypes, location = {}): RouteLocationNamedRaw =>
   createLocation(name, location)
 
 export const locationTrashGeneric = createLocationTrash('files-trash-generic')
 
 export const isLocationTrashActive = isLocationActiveDirector<trashTypes>(locationTrashGeneric)
 
-export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
+export const buildRoutes = (components: RouteComponents): RouteRecordRaw[] => [
   {
     path: '/trash',
     component: components.App,
diff --git a/packages/web-app-files/src/router/utils.ts b/packages/web-app-files/src/router/utils.ts
index b608a5b85a4..10c407a5e55 100644
--- a/packages/web-app-files/src/router/utils.ts
+++ b/packages/web-app-files/src/router/utils.ts
@@ -1,5 +1,4 @@
-import { Location } from 'vue-router'
-import { Router } from 'web-pkg/src/types/router'
+import { Router, RouteLocationNamedRaw } from 'vue-router'
 import merge from 'lodash-es/merge'
 import { unref } from 'vue'
 
@@ -16,9 +15,9 @@ export interface ActiveRouteDirectorFunc<T extends string> {
  */
 export const isLocationActive = (
   router: Router,
-  ...comparatives: [Location, ...Location[]]
+  ...comparatives: [RouteLocationNamedRaw, ...RouteLocationNamedRaw[]]
 ): boolean => {
-  // FIXME: router.resolve cleans the path, we don't need it, if we can rely on
+  // FIXME: router.resolve cleans the path. we don't need it, if we can rely on
   // router.currentRoute to not have slashs encoded for paths
   const { href: currentHref } = router.resolve(unref(router.currentRoute))
   return comparatives
@@ -50,7 +49,7 @@ export const isLocationActive = (
  * @param defaultComparatives
  */
 export const isLocationActiveDirector = <T extends string>(
-  ...defaultComparatives: [Location, ...Location[]]
+  ...defaultComparatives: [RouteLocationNamedRaw, ...RouteLocationNamedRaw[]]
 ): ActiveRouteDirectorFunc<T> => {
   return (router: Router, ...comparatives: T[]): boolean => {
     if (!comparatives.length) {
@@ -86,7 +85,10 @@ export function $gettext(msg: string): string {
  * @param name
  * @param locations
  */
-export const createLocation = (name: string, ...locations: Location[]): Location =>
+export const createLocation = (
+  name: string,
+  ...locations: RouteLocationNamedRaw[]
+): RouteLocationNamedRaw =>
   merge(
     {},
     {
diff --git a/packages/web-app-files/src/services/folder.ts b/packages/web-app-files/src/services/folder.ts
index 43e677c3cdb..8d5da35dad7 100644
--- a/packages/web-app-files/src/services/folder.ts
+++ b/packages/web-app-files/src/services/folder.ts
@@ -1,4 +1,4 @@
-import Router from 'vue-router'
+import { Router } from 'vue-router'
 import { useTask } from 'vue-concurrency'
 import { useRouter, useClientService, useStore } from 'web-pkg/src/composables'
 import { unref } from 'vue'
diff --git a/packages/web-app-files/src/services/folder/loaderFavorites.ts b/packages/web-app-files/src/services/folder/loaderFavorites.ts
index 1b8c3bc0a27..1a1a79bed72 100644
--- a/packages/web-app-files/src/services/folder/loaderFavorites.ts
+++ b/packages/web-app-files/src/services/folder/loaderFavorites.ts
@@ -1,5 +1,5 @@
 import { FolderLoader, FolderLoaderTask, TaskContext } from '../folder'
-import Router from 'vue-router'
+import { Router } from 'vue-router'
 import { useTask } from 'vue-concurrency'
 import { DavProperties } from 'web-client/src/webdav/constants'
 import { buildResource } from 'web-client/src/helpers'
diff --git a/packages/web-app-files/src/services/folder/loaderSharedViaLink.ts b/packages/web-app-files/src/services/folder/loaderSharedViaLink.ts
index 22d368569e5..163064c6798 100644
--- a/packages/web-app-files/src/services/folder/loaderSharedViaLink.ts
+++ b/packages/web-app-files/src/services/folder/loaderSharedViaLink.ts
@@ -1,5 +1,5 @@
 import { FolderLoader, FolderLoaderTask, TaskContext } from '../folder'
-import Router from 'vue-router'
+import { Router } from 'vue-router'
 import { useTask } from 'vue-concurrency'
 import { isLocationSharesActive } from '../../router'
 import { ShareTypes } from 'web-client/src/helpers/share'
diff --git a/packages/web-app-files/src/services/folder/loaderSharedWithMe.ts b/packages/web-app-files/src/services/folder/loaderSharedWithMe.ts
index aa4513df8d6..8adc6cc41e5 100644
--- a/packages/web-app-files/src/services/folder/loaderSharedWithMe.ts
+++ b/packages/web-app-files/src/services/folder/loaderSharedWithMe.ts
@@ -1,5 +1,5 @@
 import { FolderLoader, FolderLoaderTask, TaskContext } from '../folder'
-import Router from 'vue-router'
+import { Router } from 'vue-router'
 import { useTask } from 'vue-concurrency'
 import { aggregateResourceShares } from '../../helpers/resources'
 import { isLocationSharesActive } from '../../router'
diff --git a/packages/web-app-files/src/services/folder/loaderSharedWithOthers.ts b/packages/web-app-files/src/services/folder/loaderSharedWithOthers.ts
index 38cc4d2ce5a..d3623799c23 100644
--- a/packages/web-app-files/src/services/folder/loaderSharedWithOthers.ts
+++ b/packages/web-app-files/src/services/folder/loaderSharedWithOthers.ts
@@ -1,5 +1,5 @@
 import { FolderLoader, FolderLoaderTask, TaskContext } from '../folder'
-import Router from 'vue-router'
+import { Router } from 'vue-router'
 import { useTask } from 'vue-concurrency'
 import { isLocationSharesActive } from '../../router'
 import { aggregateResourceShares } from '../../helpers/resources'
diff --git a/packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.ts b/packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.ts
index cd1fd84e0cd..709ea33a647 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.ts
+++ b/packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.ts
@@ -1,12 +1,13 @@
 import AppBar from 'web-app-files/src/components/AppBar/AppBar.vue'
-import { mockDeep } from 'jest-mock-extended'
+import { mock, mockDeep } from 'jest-mock-extended'
 import { Resource } from 'web-client'
 import {
   createStore,
   defaultComponentMocks,
   defaultPlugins,
   shallowMount,
-  defaultStoreMockOptions
+  defaultStoreMockOptions,
+  RouteLocation
 } from 'web-test-helpers'
 
 const selectedFiles = [mockDeep<Resource>(), mockDeep<Resource>()]
@@ -127,7 +128,7 @@ function getShallowWrapper(
 ) {
   const mocks = defaultComponentMocks({
     gettext: false,
-    currentRoute: { name: 'files-trash-generic' }
+    currentRoute: mock<RouteLocation>({ name: 'files-trash-generic' })
   })
   mocks.$route.meta.title = 'ExampleTitle'
   const storeOptions = defaultStoreMockOptions
diff --git a/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts b/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts
index d0cf31613dc..5a4130ea396 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts
+++ b/packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts
@@ -12,6 +12,7 @@ import {
   defaultStoreMockOptions,
   defaultComponentMocks
 } from 'web-test-helpers'
+import { RouteLocation } from 'vue-router'
 
 jest.mock('web-pkg/src/composables/authContext')
 
@@ -277,7 +278,9 @@ function getWrapper({
   storeOptions.modules.Files.getters.clipboardResources.mockImplementation(() => clipboardResources)
   storeOptions.modules.Files.getters.files.mockImplementation(() => files)
   const store = createStore(storeOptions)
-  const mocks = { ...defaultComponentMocks({ currentRoute: { name: currentRouteName } }) }
+  const mocks = {
+    ...defaultComponentMocks({ currentRoute: mock<RouteLocation>({ name: currentRouteName }) })
+  }
   return {
     storeOptions,
     mocks,
diff --git a/packages/web-app-files/tests/unit/components/AppBar/SharesNavigation.spec.ts b/packages/web-app-files/tests/unit/components/AppBar/SharesNavigation.spec.ts
index 8843d298a40..e7e40d9bd60 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/SharesNavigation.spec.ts
+++ b/packages/web-app-files/tests/unit/components/AppBar/SharesNavigation.spec.ts
@@ -1,26 +1,27 @@
 import SharesNavigation from '../../../../src/components/AppBar/SharesNavigation.vue'
 import { locationSharesWithMe } from 'web-app-files/src/router/shares'
 import { mock } from 'jest-mock-extended'
-import { RouteRecordPublic } from 'vue-router/types/router'
+import { RouteRecordNormalized } from 'vue-router'
 import {
   createStore,
   defaultPlugins,
   defaultStubs,
   shallowMount,
   defaultStoreMockOptions,
-  defaultComponentMocks
+  defaultComponentMocks,
+  RouteLocation
 } from 'web-test-helpers'
 
 const routes = [
-  mock<RouteRecordPublic>({
+  mock<RouteRecordNormalized>({
     path: '/files/shares/with-me/',
     name: 'files-shares-with-me'
   }),
-  mock<RouteRecordPublic>({
+  mock<RouteRecordNormalized>({
     path: '/files/shares/with-others/',
     name: 'files-shares-with-others'
   }),
-  mock<RouteRecordPublic>({
+  mock<RouteRecordNormalized>({
     path: '/files/shares/via-link/',
     name: 'files-shares-via-link'
   })
@@ -36,12 +37,14 @@ describe('SharesNavigation component', () => {
 function getWrapper({ currentRouteName = locationSharesWithMe.name } = {}) {
   const storeOptions = { ...defaultStoreMockOptions }
   const store = createStore(storeOptions)
-  const mocks = defaultComponentMocks({ currentRoute: { name: currentRouteName } })
+  const mocks = defaultComponentMocks({
+    currentRoute: mock<RouteLocation>({ name: currentRouteName })
+  })
   mocks.$router.getRoutes.mockImplementation(() => routes)
   return {
     storeOptions,
     mocks,
-    wrapper: shallowMount(SharesNavigation as any, {
+    wrapper: shallowMount(SharesNavigation, {
       global: {
         stubs: defaultStubs,
         renderStubDefaultSlot: true,
diff --git a/packages/web-app-files/tests/unit/components/SideBar/FileInfo.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/FileInfo.spec.ts
index aed9726447c..a11f58cf4c0 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/FileInfo.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/FileInfo.spec.ts
@@ -4,7 +4,8 @@ import {
   defaultComponentMocks,
   defaultPlugins,
   shallowMount,
-  defaultStoreMockOptions
+  defaultStoreMockOptions,
+  RouteLocation
 } from 'web-test-helpers'
 import { mock } from 'jest-mock-extended'
 import { Resource } from 'web-client'
@@ -43,7 +44,7 @@ function createWrapper() {
           displayedItem: file
         },
         mocks: {
-          ...defaultComponentMocks({ currentRoute: { path: '/files' } })
+          ...defaultComponentMocks({ currentRoute: mock<RouteLocation>({ path: '/files' }) })
         }
       }
     })
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.spec.ts
index 93f54a66059..53d412dd505 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.spec.ts
@@ -1,3 +1,4 @@
+import { mock } from 'jest-mock-extended'
 import InviteCollaboratorForm from 'web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue'
 import { ShareTypes } from 'web-client/src/helpers/share'
 import {
@@ -5,6 +6,7 @@ import {
   defaultComponentMocks,
   defaultPlugins,
   defaultStoreMockOptions,
+  RouteLocation,
   shallowMount
 } from 'web-test-helpers'
 
@@ -92,7 +94,9 @@ function getWrapper({
       },
       global: {
         plugins: [...defaultPlugins(), store],
-        mocks: defaultComponentMocks({ currentRoute: { params: { storageId } } })
+        mocks: defaultComponentMocks({
+          currentRoute: mock<RouteLocation>({ params: { storageId } })
+        })
       }
     })
   }
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/FileShares.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Shares/FileShares.spec.ts
index a9268065f71..0f87dd81c41 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/FileShares.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/FileShares.spec.ts
@@ -11,7 +11,8 @@ import {
   shallowMount,
   defaultStoreMockOptions,
   defaultComponentMocks,
-  defaultStubs
+  defaultStubs,
+  RouteLocation
 } from 'web-test-helpers'
 
 const getCollaborator = () => ({
@@ -237,7 +238,9 @@ function getWrapper({
       props: { space },
       global: {
         plugins: [...defaultPlugins(), store],
-        mocks: defaultComponentMocks({ currentRoute: { name: currentRouteName } }),
+        mocks: defaultComponentMocks({
+          currentRoute: mock<RouteLocation>({ name: currentRouteName })
+        }),
         provide: {
           incomingParentShare: {}
         },
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/SpaceMembers.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Shares/SpaceMembers.spec.ts
index dd766719c86..2dfd5491d9e 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/SpaceMembers.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/SpaceMembers.spec.ts
@@ -14,7 +14,8 @@ import {
   mount,
   shallowMount,
   defaultStoreMockOptions,
-  defaultComponentMocks
+  defaultComponentMocks,
+  RouteLocation
 } from 'web-test-helpers'
 
 const memberMocks = {
@@ -172,7 +173,9 @@ function getWrapper({
     },
     global: {
       plugins: [...defaultPlugins(), store],
-      mocks: defaultComponentMocks({ currentRoute: { name: currentRouteName } }),
+      mocks: defaultComponentMocks({
+        currentRoute: mock<RouteLocation>({ name: currentRouteName })
+      }),
       provide: {
         displayedItem: space
       },
diff --git a/packages/web-app-files/tests/unit/components/SideBar/SideBar.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/SideBar.spec.ts
index d82a2c33c91..68b3e0ee6b2 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/SideBar.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/SideBar.spec.ts
@@ -7,12 +7,13 @@ import {
 import InnerSideBar from 'web-pkg/src/components/sideBar/SideBar.vue'
 import SideBar from 'web-app-files/src/components/SideBar/SideBar.vue'
 import { Resource } from 'web-client/src/helpers'
-import { mockDeep } from 'jest-mock-extended'
+import { mock, mockDeep } from 'jest-mock-extended'
 import {
   createStore,
   defaultComponentMocks,
   defaultPlugins,
   defaultStoreMockOptions,
+  RouteLocation,
   shallowMount
 } from 'web-test-helpers'
 
@@ -156,7 +157,7 @@ function createWrapper({
           'click-outside': jest.fn()
         },
         mocks: {
-          ...defaultComponentMocks({ currentRoute: currentRoute as unknown })
+          ...defaultComponentMocks({ currentRoute: mock<RouteLocation>(currentRoute as any) })
         }
       }
     })
diff --git a/packages/web-app-files/tests/unit/components/Spaces/SpaceContextActions.spec.ts b/packages/web-app-files/tests/unit/components/Spaces/SpaceContextActions.spec.ts
index fe53a0b0e01..eddb92d5ca4 100644
--- a/packages/web-app-files/tests/unit/components/Spaces/SpaceContextActions.spec.ts
+++ b/packages/web-app-files/tests/unit/components/Spaces/SpaceContextActions.spec.ts
@@ -5,8 +5,10 @@ import {
   defaultComponentMocks,
   defaultPlugins,
   mount,
-  defaultStoreMockOptions
+  defaultStoreMockOptions,
+  RouteLocation
 } from 'web-test-helpers'
+import { mock } from 'jest-mock-extended'
 
 const spaceMock = {
   id: '1',
@@ -32,7 +34,7 @@ function getWrapper(space) {
       },
       global: {
         mocks: {
-          ...defaultComponentMocks({ currentRoute: { path: '/files' } })
+          ...defaultComponentMocks({ currentRoute: mock<RouteLocation>({ path: '/files' }) })
         },
         plugins: [...defaultPlugins(), store]
       }
diff --git a/packages/web-app-files/tests/unit/composables/driveResolver/useDriveResolver.spec.ts b/packages/web-app-files/tests/unit/composables/driveResolver/useDriveResolver.spec.ts
index f27a2d518bf..fdc08cfa719 100644
--- a/packages/web-app-files/tests/unit/composables/driveResolver/useDriveResolver.spec.ts
+++ b/packages/web-app-files/tests/unit/composables/driveResolver/useDriveResolver.spec.ts
@@ -1,12 +1,13 @@
 import { useCapabilitySpacesEnabled, useDriveResolver } from 'web-pkg/src'
 import { computed, ref, unref } from 'vue'
-import { mockDeep } from 'jest-mock-extended'
+import { mock, mockDeep } from 'jest-mock-extended'
 import { isShareSpaceResource, SpaceResource } from 'web-client/src/helpers'
 import {
   createStore,
   getComposableWrapper,
   defaultStoreMockOptions,
-  defaultComponentMocks
+  defaultComponentMocks,
+  RouteLocation
 } from 'web-test-helpers'
 
 jest.unmock('web-app-files/src/composables')
@@ -79,7 +80,11 @@ describe('useDriveResolver', () => {
       },
       {
         mocks: defaultComponentMocks({
-          currentRoute: { name: 'files-spaces-generic', path: '/', query: { fileId } }
+          currentRoute: mock<RouteLocation>({
+            name: 'files-spaces-generic',
+            path: '/',
+            query: { fileId }
+          })
         }),
         store
       }
@@ -106,7 +111,11 @@ describe('useDriveResolver', () => {
       },
       {
         mocks: defaultComponentMocks({
-          currentRoute: { name: 'files-spaces-generic', path: '/', query: { fileId: undefined } }
+          currentRoute: mock<RouteLocation>({
+            name: 'files-spaces-generic',
+            path: '/',
+            query: { fileId: undefined }
+          })
         }),
         store
       }
@@ -133,7 +142,11 @@ describe('useDriveResolver', () => {
       },
       {
         mocks: defaultComponentMocks({
-          currentRoute: { name: 'files-spaces-generic', path: '/', query: { fileId: undefined } }
+          currentRoute: mock<RouteLocation>({
+            name: 'files-spaces-generic',
+            path: '/',
+            query: { fileId: undefined }
+          })
         }),
         store
       }
diff --git a/packages/web-app-files/tests/unit/composables/scrollTo/useScrollTo.spec.ts b/packages/web-app-files/tests/unit/composables/scrollTo/useScrollTo.spec.ts
index ddf5bcda9e3..b38d523d3e5 100644
--- a/packages/web-app-files/tests/unit/composables/scrollTo/useScrollTo.spec.ts
+++ b/packages/web-app-files/tests/unit/composables/scrollTo/useScrollTo.spec.ts
@@ -1,10 +1,10 @@
-import { mockDeep } from 'jest-mock-extended'
+import { mock, mockDeep } from 'jest-mock-extended'
 import { useScrollTo } from 'web-app-files/src/composables/scrollTo'
 import { Resource } from 'web-client/src'
 import { eventBus } from 'web-pkg/src'
 import { defaultComponentMocks } from 'web-test-helpers/src/mocks/defaultComponentMocks'
 import { defaultStoreMockOptions } from 'web-test-helpers/src/mocks/store/defaultStoreMockOptions'
-import { getComposableWrapper } from 'web-test-helpers'
+import { getComposableWrapper, RouteLocation } from 'web-test-helpers'
 
 describe('useScrollTo', () => {
   it('should be valid', () => {
@@ -92,7 +92,9 @@ describe('useScrollTo', () => {
         },
         {
           mocks: {
-            ...defaultComponentMocks({ currentRoute: { query: { scrollTo: resourceId } } })
+            ...defaultComponentMocks({
+              currentRoute: mock<RouteLocation>({ query: { scrollTo: resourceId } })
+            })
           },
           store: defaultStoreMockOptions
         }
@@ -110,7 +112,7 @@ describe('useScrollTo', () => {
         {
           mocks: {
             ...defaultComponentMocks({
-              currentRoute: { query: { scrollTo: resourceId } }
+              currentRoute: mock<RouteLocation>({ query: { scrollTo: resourceId } })
             }),
             $store: { commit: jest.fn() }
           },
@@ -130,7 +132,9 @@ describe('useScrollTo', () => {
         {
           mocks: {
             ...defaultComponentMocks({
-              currentRoute: { query: { scrollTo: resourceId, details: 'details' } }
+              currentRoute: mock<RouteLocation>({
+                query: { scrollTo: resourceId, details: 'details' }
+              })
             }),
             $store: { commit: jest.fn() }
           },
diff --git a/packages/web-app-files/tests/unit/composables/upload/useUploadHelpers.spec.ts b/packages/web-app-files/tests/unit/composables/upload/useUploadHelpers.spec.ts
index 165ee2579e6..5f8a880a560 100644
--- a/packages/web-app-files/tests/unit/composables/upload/useUploadHelpers.spec.ts
+++ b/packages/web-app-files/tests/unit/composables/upload/useUploadHelpers.spec.ts
@@ -1,5 +1,5 @@
 import { useUploadHelpers } from '../../../../src/composables/upload'
-import { mockDeep } from 'jest-mock-extended'
+import { mock, mockDeep } from 'jest-mock-extended'
 import { SpaceResource } from 'web-client/src/helpers'
 import {
   createStore,
@@ -9,6 +9,7 @@ import {
 } from 'web-test-helpers'
 import { ComputedRef, computed } from 'vue'
 import { UppyService } from 'web-runtime/src/services/uppyService'
+import { RouteLocation } from 'vue-router'
 
 describe('useUploadHelpers', () => {
   const currentPathMock = 'path'
@@ -39,12 +40,12 @@ describe('useUploadHelpers', () => {
 
   it('converts normal files to uppy resources', () => {
     const mocks = defaultComponentMocks({
-      currentRoute: {
+      currentRoute: mock<RouteLocation>({
         name: 'some-route',
         params: {
           item: currentPathMock
         }
-      }
+      })
     })
     mocks.$clientService.owncloudSdk.files.getFileUrl.mockResolvedValue(uploadPathMock)
     mocks.$clientService.owncloudSdk.files.fileInfo.mockResolvedValue(mockFile)
diff --git a/packages/web-app-files/tests/unit/mixins/actions/acceptShare.spec.ts b/packages/web-app-files/tests/unit/mixins/actions/acceptShare.spec.ts
index 88499747965..f2732e4fa08 100644
--- a/packages/web-app-files/tests/unit/mixins/actions/acceptShare.spec.ts
+++ b/packages/web-app-files/tests/unit/mixins/actions/acceptShare.spec.ts
@@ -1,6 +1,7 @@
+import { mock } from 'jest-mock-extended'
 import acceptShare from 'web-app-files/src/mixins/actions/acceptShare'
 import { ShareStatus } from 'web-client/src/helpers/share'
-import { defaultComponentMocks, mount } from 'web-test-helpers'
+import { defaultComponentMocks, mount, RouteLocation } from 'web-test-helpers'
 
 const sharesWithMeLocation = 'files-shares-with-me'
 const sharesWithOthersLocation = 'files-shares-with-others'
@@ -47,7 +48,9 @@ describe('acceptShare', () => {
 function getWrapper(routeName = sharesWithMeLocation) {
   return {
     wrapper: mount(Component, {
-      global: { mocks: defaultComponentMocks({ currentRoute: { name: routeName } }) }
+      global: {
+        mocks: defaultComponentMocks({ currentRoute: mock<RouteLocation>({ name: routeName }) })
+      }
     })
   }
 }
diff --git a/packages/web-app-files/tests/unit/mixins/actions/delete.spec.ts b/packages/web-app-files/tests/unit/mixins/actions/delete.spec.ts
index 31fd00be7de..2dbd04dba10 100644
--- a/packages/web-app-files/tests/unit/mixins/actions/delete.spec.ts
+++ b/packages/web-app-files/tests/unit/mixins/actions/delete.spec.ts
@@ -1,3 +1,4 @@
+import { mock } from 'jest-mock-extended'
 import Delete from 'web-app-files/src/mixins/actions/delete.js'
 
 import {
@@ -5,7 +6,8 @@ import {
   defaultComponentMocks,
   defaultPlugins,
   shallowMount,
-  defaultStoreMockOptions
+  defaultStoreMockOptions,
+  RouteLocation
 } from 'web-test-helpers'
 
 const Component = {
@@ -59,7 +61,7 @@ function getWrapper({ deletePermanent = false, invalidLocation = false } = {}) {
     ? 'files-trash-generic'
     : 'files-spaces-generic'
   const mocks = {
-    ...defaultComponentMocks({ currentRoute: { name: routeName } }),
+    ...defaultComponentMocks({ currentRoute: mock<RouteLocation>({ name: routeName }) }),
     space: { driveType: 'personal', spaceRoles: { viewer: [], editor: [], manager: [] } }
   }
   const storeOptions = defaultStoreMockOptions
diff --git a/packages/web-app-files/tests/unit/mixins/spaces/setImage.spec.ts b/packages/web-app-files/tests/unit/mixins/spaces/setImage.spec.ts
index 43f9c2810ef..93b0ef5d6e8 100644
--- a/packages/web-app-files/tests/unit/mixins/spaces/setImage.spec.ts
+++ b/packages/web-app-files/tests/unit/mixins/spaces/setImage.spec.ts
@@ -1,7 +1,7 @@
 import setImage from 'web-app-files/src/mixins/spaces/actions/setImage'
 import { thumbnailService } from '../../../../src/services'
 import { buildSpace, Resource } from 'web-client/src/helpers'
-import { mockDeep } from 'jest-mock-extended'
+import { mock, mockDeep } from 'jest-mock-extended'
 import { ClientService, clientService } from 'web-pkg'
 import { Graph } from 'web-client'
 import {
@@ -9,7 +9,8 @@ import {
   defaultPlugins,
   mount,
   defaultStoreMockOptions,
-  defaultComponentMocks
+  defaultComponentMocks,
+  RouteLocation
 } from 'web-test-helpers'
 
 const Component = {
@@ -156,7 +157,9 @@ describe('setImage', () => {
 function getWrapper(space) {
   const clientMock = mockDeep<ClientService>()
   clientMock.webdav.getFileInfo.mockResolvedValue(mockDeep<Resource>())
-  const defaultMocks = defaultComponentMocks({ currentRoute: { name: 'files-spaces-generic' } })
+  const defaultMocks = defaultComponentMocks({
+    currentRoute: mock<RouteLocation>({ name: 'files-spaces-generic' })
+  })
   const storeOptions = {
     ...defaultStoreMockOptions,
     modules: { ...defaultStoreMockOptions.modules, user: { state: { id: 'alice', uuid: 1 } } }
diff --git a/packages/web-app-files/tests/unit/mixins/spaces/uploadImage.spec.ts b/packages/web-app-files/tests/unit/mixins/spaces/uploadImage.spec.ts
index 70aa075cae3..d23a676c47e 100644
--- a/packages/web-app-files/tests/unit/mixins/spaces/uploadImage.spec.ts
+++ b/packages/web-app-files/tests/unit/mixins/spaces/uploadImage.spec.ts
@@ -1,6 +1,6 @@
 import uploadImage from 'web-app-files/src/mixins/spaces/actions/uploadImage.js'
 import { thumbnailService } from '../../../../src/services'
-import { mockDeep } from 'jest-mock-extended'
+import { mock, mockDeep } from 'jest-mock-extended'
 import { OwnCloudSdk } from 'web-client/src/types'
 import { Graph } from 'web-client'
 import { clientService } from 'web-pkg'
@@ -9,7 +9,8 @@ import {
   defaultPlugins,
   mount,
   defaultStoreMockOptions,
-  defaultComponentMocks
+  defaultComponentMocks,
+  RouteLocation
 } from 'web-test-helpers'
 
 const Component = {
@@ -64,7 +65,9 @@ describe('uploadImage', () => {
 
 function getWrapper(resolvePutFileContents = true) {
   const clientMock = mockDeep<OwnCloudSdk>()
-  const defaultMocks = defaultComponentMocks({ currentRoute: { name: 'files-spaces-generic' } })
+  const defaultMocks = defaultComponentMocks({
+    currentRoute: mock<RouteLocation>({ name: 'files-spaces-generic' })
+  })
   const mocks = {
     ...defaultMocks,
     $client: {
diff --git a/packages/web-app-files/tests/unit/router/utils.spec.ts b/packages/web-app-files/tests/unit/router/utils.spec.ts
index a77159bff82..8119edfb1fc 100644
--- a/packages/web-app-files/tests/unit/router/utils.spec.ts
+++ b/packages/web-app-files/tests/unit/router/utils.spec.ts
@@ -15,8 +15,14 @@ describe('utils', () => {
         resolve: (r: any) => mock<RouteLocation & { href: string }>({ href: r.name })
       })
 
-      expect(isLocationActive(fakeRouter, { name: 'foo' })).toBe(true)
-      expect(isLocationActive(fakeRouter, { name: 'foo' }, { name: 'bar' })).toBe(true)
+      expect(isLocationActive(fakeRouter, mock<RouteLocation>({ name: 'foo' }))).toBe(true)
+      expect(
+        isLocationActive(
+          fakeRouter,
+          mock<RouteLocation>({ name: 'foo' }),
+          mock<RouteLocation>({ name: 'bar' })
+        )
+      ).toBe(true)
     })
 
     it('returns false if all locations inactive', () => {
@@ -25,8 +31,14 @@ describe('utils', () => {
         resolve: (r: any) => mock<RouteLocation & { href: string }>({ href: r.name })
       })
 
-      expect(isLocationActive(fakeRouter, { name: 'bar' })).toBe(false)
-      expect(isLocationActive(fakeRouter, { name: 'bar' }, { name: 'baz' })).toBe(false)
+      expect(isLocationActive(fakeRouter, mock<RouteLocation>({ name: 'bar' }))).toBe(false)
+      expect(
+        isLocationActive(
+          fakeRouter,
+          mock<RouteLocation>({ name: 'bar' }),
+          mock<RouteLocation>({ name: 'baz' })
+        )
+      ).toBe(false)
     })
   })
 
@@ -38,9 +50,9 @@ describe('utils', () => {
       })
 
       const isFilesLocationActive = isLocationActiveDirector(
-        { name: 'foo' },
-        { name: 'bar' },
-        { name: 'baz' }
+        mock<RouteLocation>({ name: 'foo' }),
+        mock<RouteLocation>({ name: 'bar' }),
+        mock<RouteLocation>({ name: 'baz' })
       )
       expect(isFilesLocationActive(fakeRouter)).toBe(false)
 
@@ -56,20 +68,25 @@ describe('utils', () => {
         resolve: (r: any) => mock<RouteLocation & { href: string }>({ href: r.name })
       })
 
-      const isFilesLocationActive = isLocationActiveDirector({ name: 'foo' }, { name: 'bar' })
+      const isFilesLocationActive = isLocationActiveDirector(
+        mock<RouteLocation>({ name: 'foo' }),
+        mock<RouteLocation>({ name: 'bar' })
+      )
       expect(() => isFilesLocationActive(fakeRouter, 'unknown')).toThrow()
     })
   })
 
   describe('createLocationDirector', () => {
     test('creates a location and handle arguments', () => {
-      const testLocation = createLocation('foo', {
-        path: '/should-not-add',
-        params: { foo: 'foo-param-value' },
-        query: { bar: 'bar-query-value' }
-      })
+      const testLocation = createLocation(
+        'foo',
+        mock<RouteLocation>({
+          path: '/should-not-add',
+          params: { foo: 'foo-param-value' },
+          query: { bar: 'bar-query-value' }
+        })
+      )
       expect(testLocation.name).toBe('foo')
-      expect(testLocation.path).toBeFalsy()
       expect(testLocation.params.foo).toBe('foo-param-value')
       expect(testLocation.query.bar).toBe('bar-query-value')
     })
diff --git a/packages/web-app-files/tests/unit/search/sdk.spec.ts b/packages/web-app-files/tests/unit/search/sdk.spec.ts
index 184d1aa26fa..bbbb310b3f6 100644
--- a/packages/web-app-files/tests/unit/search/sdk.spec.ts
+++ b/packages/web-app-files/tests/unit/search/sdk.spec.ts
@@ -1,8 +1,9 @@
 import { SDKSearch } from '../../../src/search'
 import { clientService } from 'web-pkg/src/services'
 import { Store } from 'vuex'
-import { Router } from 'vue-router'
+import { RouteLocation, Router } from 'vue-router'
 import { mock, mockDeep } from 'jest-mock-extended'
+import { ref } from 'vue'
 
 const searchMock = jest.fn()
 jest.spyOn(clientService, 'owncloudSdk', 'get').mockImplementation(
@@ -49,7 +50,7 @@ describe('SDKProvider', () => {
         const search = new SDKSearch(
           store,
           mock<Router>({
-            currentRoute: { name: v.route }
+            currentRoute: ref(mock<RouteLocation>({ name: v.route }))
           })
         )
 
diff --git a/packages/web-app-files/tests/unit/views/Favorites.spec.ts b/packages/web-app-files/tests/unit/views/Favorites.spec.ts
index 4c7ab7860d6..aabfc6c0ca6 100644
--- a/packages/web-app-files/tests/unit/views/Favorites.spec.ts
+++ b/packages/web-app-files/tests/unit/views/Favorites.spec.ts
@@ -2,7 +2,7 @@ import Favorites from '../../../src/views/Favorites.vue'
 import { useResourcesViewDefaults } from 'web-app-files/src/composables'
 import { useResourcesViewDefaultsMock } from 'web-app-files/tests/mocks/useResourcesViewDefaultsMock'
 import { ref } from 'vue'
-import { mockDeep } from 'jest-mock-extended'
+import { mockDeep, mock } from 'jest-mock-extended'
 import { Resource } from 'web-client'
 import {
   createStore,
@@ -12,6 +12,7 @@ import {
   defaultStoreMockOptions,
   defaultComponentMocks
 } from 'web-test-helpers'
+import { RouteLocation } from 'vue-router'
 
 jest.mock('web-app-files/src/composables')
 
@@ -51,7 +52,7 @@ function getMountedWrapper({ mocks = {}, files = [], loading = false } = {}) {
   )
   const defaultMocks = {
     ...defaultComponentMocks({
-      currentRoute: { name: 'files-common-favorites' }
+      currentRoute: mock<RouteLocation>({ name: 'files-common-favorites' })
     }),
     ...(mocks && mocks)
   }
diff --git a/packages/web-app-files/tests/unit/views/FilesDrop.spec.ts b/packages/web-app-files/tests/unit/views/FilesDrop.spec.ts
index cc02045945b..9c78c0cd9d1 100644
--- a/packages/web-app-files/tests/unit/views/FilesDrop.spec.ts
+++ b/packages/web-app-files/tests/unit/views/FilesDrop.spec.ts
@@ -5,8 +5,10 @@ import {
   mount,
   defaultStoreMockOptions,
   defaultComponentMocks,
-  defaultStubs
+  defaultStubs,
+  RouteLocation
 } from 'web-test-helpers'
+import { mock } from 'jest-mock-extended'
 
 describe('FilesDrop view', () => {
   it('drop container always present', () => {
@@ -29,7 +31,7 @@ describe('FilesDrop view', () => {
 function getMountedWrapper({ mocks = {}, loading = false } = {}) {
   const defaultMocks = {
     ...defaultComponentMocks({
-      currentRoute: { name: 'files-common-favorites' }
+      currentRoute: mock<RouteLocation>({ name: 'files-common-favorites' })
     }),
     $client: {
       publicFiles: { list: jest.fn(() => Promise.resolve([{ getProperty: jest.fn() }])) }
diff --git a/packages/web-app-files/tests/unit/views/shares/SharedViaLink.spec.ts b/packages/web-app-files/tests/unit/views/shares/SharedViaLink.spec.ts
index 4db40374952..8d50041b6ca 100644
--- a/packages/web-app-files/tests/unit/views/shares/SharedViaLink.spec.ts
+++ b/packages/web-app-files/tests/unit/views/shares/SharedViaLink.spec.ts
@@ -2,7 +2,7 @@ import SharedViaLink from '../../../../src/views/shares/SharedViaLink.vue'
 import { useResourcesViewDefaults } from 'web-app-files/src/composables'
 import { useResourcesViewDefaultsMock } from 'web-app-files/tests/mocks/useResourcesViewDefaultsMock'
 import { ref } from 'vue'
-import { mockDeep } from 'jest-mock-extended'
+import { mock, mockDeep } from 'jest-mock-extended'
 import { Resource } from 'web-client'
 import {
   createStore,
@@ -10,7 +10,8 @@ import {
   mount,
   defaultStoreMockOptions,
   defaultComponentMocks,
-  defaultStubs
+  defaultStubs,
+  RouteLocation
 } from 'web-test-helpers'
 
 jest.mock('web-app-files/src/composables')
@@ -55,7 +56,7 @@ function getMountedWrapper({ mocks = {}, files = [], loading = false } = {}) {
   )
   const defaultMocks = {
     ...defaultComponentMocks({
-      currentRoute: { name: 'files-shares-via-link' }
+      currentRoute: mock<RouteLocation>({ name: 'files-shares-via-link' })
     }),
     ...(mocks && mocks)
   }
diff --git a/packages/web-app-files/tests/unit/views/shares/SharedWithMe.spec.ts b/packages/web-app-files/tests/unit/views/shares/SharedWithMe.spec.ts
index 15dca33657d..e5abb82fb79 100644
--- a/packages/web-app-files/tests/unit/views/shares/SharedWithMe.spec.ts
+++ b/packages/web-app-files/tests/unit/views/shares/SharedWithMe.spec.ts
@@ -3,9 +3,9 @@ import { useResourcesViewDefaults, useSort } from 'web-app-files/src/composables
 import { useResourcesViewDefaultsMock } from 'web-app-files/tests/mocks/useResourcesViewDefaultsMock'
 import { ShareStatus } from 'web-client/src/helpers/share'
 import { ref } from 'vue'
-import { defaultStubs } from 'web-test-helpers'
+import { defaultStubs, RouteLocation } from 'web-test-helpers'
 import { useSortMock } from 'web-app-files/tests/mocks/useSortMock'
-import { mockDeep } from 'jest-mock-extended'
+import { mock, mockDeep } from 'jest-mock-extended'
 import { Resource } from 'web-client'
 import {
   createStore,
@@ -92,7 +92,7 @@ function getMountedWrapper({ mocks = {}, loading = false, files = [] } = {}) {
   jest.mocked(useSort).mockImplementation((options) => useSortMock({ items: options.items }))
   const defaultMocks = {
     ...defaultComponentMocks({
-      currentRoute: { name: 'files-shares-with-me' }
+      currentRoute: mock<RouteLocation>({ name: 'files-shares-with-me' })
     }),
     ...(mocks && mocks)
   }
diff --git a/packages/web-app-files/tests/unit/views/shares/SharedWithOthers.spec.ts b/packages/web-app-files/tests/unit/views/shares/SharedWithOthers.spec.ts
index 7e24b3ce2b5..0a28c822561 100644
--- a/packages/web-app-files/tests/unit/views/shares/SharedWithOthers.spec.ts
+++ b/packages/web-app-files/tests/unit/views/shares/SharedWithOthers.spec.ts
@@ -2,8 +2,8 @@ import SharedWithOthers from '../../../../src/views/shares/SharedWithOthers.vue'
 import { useResourcesViewDefaults } from 'web-app-files/src/composables'
 import { useResourcesViewDefaultsMock } from 'web-app-files/tests/mocks/useResourcesViewDefaultsMock'
 import { ref } from 'vue'
-import { defaultStubs } from 'web-test-helpers'
-import { mockDeep } from 'jest-mock-extended'
+import { defaultStubs, RouteLocation } from 'web-test-helpers'
+import { mock, mockDeep } from 'jest-mock-extended'
 import { Resource } from 'web-client'
 import {
   createStore,
@@ -55,7 +55,7 @@ function getMountedWrapper({ mocks = {}, files = [], loading = false } = {}) {
   )
   const defaultMocks = {
     ...defaultComponentMocks({
-      currentRoute: { name: 'files-shares-with-others' }
+      currentRoute: mock<RouteLocation>({ name: 'files-shares-with-others' })
     }),
     ...(mocks && mocks)
   }
diff --git a/packages/web-app-files/tests/unit/views/spaces/DriveResolver.spec.ts b/packages/web-app-files/tests/unit/views/spaces/DriveResolver.spec.ts
index ddc3e4c9538..2410e5d7b6f 100644
--- a/packages/web-app-files/tests/unit/views/spaces/DriveResolver.spec.ts
+++ b/packages/web-app-files/tests/unit/views/spaces/DriveResolver.spec.ts
@@ -1,7 +1,7 @@
 import DriveResolver from '../../../../src/views/spaces/DriveResolver.vue'
 import { useDriveResolver } from 'web-pkg/src/composables'
 import { computed, ref } from 'vue'
-import { mockDeep } from 'jest-mock-extended'
+import { mock, mockDeep } from 'jest-mock-extended'
 import { ClientService } from 'web-pkg/src'
 import { locationPublicUpload } from 'web-app-files/src/router/public'
 import { PublicSpaceResource, SpaceResource } from 'web-client/src/helpers'
@@ -12,7 +12,8 @@ import {
   mount,
   defaultStoreMockOptions,
   defaultComponentMocks,
-  defaultStubs
+  defaultStubs,
+  RouteLocation
 } from 'web-test-helpers'
 
 jest.mock('web-pkg/src/composables/driveResolver')
@@ -67,7 +68,10 @@ function getMountedWrapper({
   }))
   const defaultMocks = {
     ...defaultComponentMocks({
-      currentRoute: { name: currentRouteName, params: { driveAliasAndItem: '/' } }
+      currentRoute: mock<RouteLocation>({
+        name: currentRouteName,
+        params: { driveAliasAndItem: '/' }
+      })
     }),
     ...(mocks && mocks)
   }
diff --git a/packages/web-app-files/tests/unit/views/spaces/GenericSpace.spec.ts b/packages/web-app-files/tests/unit/views/spaces/GenericSpace.spec.ts
index 1b13cb92857..5dcbd868261 100644
--- a/packages/web-app-files/tests/unit/views/spaces/GenericSpace.spec.ts
+++ b/packages/web-app-files/tests/unit/views/spaces/GenericSpace.spec.ts
@@ -10,7 +10,8 @@ import {
   mount,
   defaultStoreMockOptions,
   defaultComponentMocks,
-  defaultStubs
+  defaultStubs,
+  RouteLocation
 } from 'web-test-helpers'
 
 jest.mock('web-app-files/src/composables')
@@ -134,7 +135,7 @@ function getMountedWrapper({
     })
   )
   const defaultMocks = {
-    ...defaultComponentMocks({ currentRoute }),
+    ...defaultComponentMocks({ currentRoute: mock<RouteLocation>(currentRoute) }),
     ...(mocks && mocks)
   }
   const storeOptions = { ...defaultStoreMockOptions }
diff --git a/packages/web-app-files/tests/unit/views/spaces/GenericTrash.spec.ts b/packages/web-app-files/tests/unit/views/spaces/GenericTrash.spec.ts
index 8f246f214bf..c8d88344bdd 100644
--- a/packages/web-app-files/tests/unit/views/spaces/GenericTrash.spec.ts
+++ b/packages/web-app-files/tests/unit/views/spaces/GenericTrash.spec.ts
@@ -2,7 +2,7 @@ import GenericTrash from '../../../../src/views/spaces/GenericTrash.vue'
 import { useResourcesViewDefaults } from 'web-app-files/src/composables'
 import { useResourcesViewDefaultsMock } from 'web-app-files/tests/mocks/useResourcesViewDefaultsMock'
 import { ref } from 'vue'
-import { mockDeep } from 'jest-mock-extended'
+import { mock, mockDeep } from 'jest-mock-extended'
 import { Resource } from 'web-client'
 import { SpaceResource } from 'web-client/src/helpers'
 import {
@@ -11,7 +11,8 @@ import {
   mount,
   defaultStoreMockOptions,
   defaultComponentMocks,
-  defaultStubs
+  defaultStubs,
+  RouteLocation
 } from 'web-test-helpers'
 
 jest.mock('web-app-files/src/composables')
@@ -65,7 +66,7 @@ function getMountedWrapper({ mocks = {}, props = {}, files = [], loading = false
   )
   const defaultMocks = {
     ...defaultComponentMocks({
-      currentRoute: { name: 'files-trash-generic' }
+      currentRoute: mock<RouteLocation>({ name: 'files-trash-generic' })
     }),
     ...(mocks && mocks)
   }
diff --git a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
index 2eea9420bce..27050f28030 100644
--- a/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
+++ b/packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts
@@ -1,5 +1,5 @@
 import Projects from '../../../../src/views/spaces/Projects.vue'
-import { mockDeep } from 'jest-mock-extended'
+import { mock, mockDeep } from 'jest-mock-extended'
 import { SpaceResource } from 'web-client/src/helpers'
 import {
   createStore,
@@ -7,7 +7,8 @@ import {
   mount,
   defaultStoreMockOptions,
   defaultComponentMocks,
-  defaultStubs
+  defaultStubs,
+  RouteLocation
 } from 'web-test-helpers'
 
 describe('Projects view', () => {
@@ -60,7 +61,7 @@ describe('Projects view', () => {
 function getMountedWrapper({ mocks = {}, spaces = [] } = {}) {
   const defaultMocks = {
     ...defaultComponentMocks({
-      currentRoute: { name: 'files-spaces-projects' }
+      currentRoute: mock<RouteLocation>({ name: 'files-spaces-projects' })
     }),
     ...(mocks && mocks)
   }
diff --git a/packages/web-pkg/src/composables/appDefaults/types.ts b/packages/web-pkg/src/composables/appDefaults/types.ts
index aa76111b3ff..f3f05c004d1 100644
--- a/packages/web-pkg/src/composables/appDefaults/types.ts
+++ b/packages/web-pkg/src/composables/appDefaults/types.ts
@@ -1,6 +1,7 @@
 import { MaybeRef } from '../../utils'
-import { LocationParams, LocationQuery } from '../router'
+import { LocationQuery } from '../router'
 import { SpaceResource } from 'web-client/src/helpers'
+import { RouteParams } from 'vue-router'
 export interface FileContext {
   path: MaybeRef<string>
   driveAliasAndItem: MaybeRef<string>
@@ -9,7 +10,7 @@ export interface FileContext {
   itemId: MaybeRef<string>
   fileName: MaybeRef<string>
   routeName: MaybeRef<string>
-  routeParams: MaybeRef<LocationParams>
+  routeParams: MaybeRef<RouteParams>
   routeQuery: MaybeRef<LocationQuery>
 }
 
diff --git a/packages/web-pkg/src/composables/appDefaults/useAppDocumentTitle.ts b/packages/web-pkg/src/composables/appDefaults/useAppDocumentTitle.ts
index a902c7b2d83..e98a008d1c8 100644
--- a/packages/web-pkg/src/composables/appDefaults/useAppDocumentTitle.ts
+++ b/packages/web-pkg/src/composables/appDefaults/useAppDocumentTitle.ts
@@ -4,7 +4,7 @@ import { FileContext } from './types'
 import { useAppMeta } from './useAppMeta'
 import { useDocumentTitle } from './useDocumentTitle'
 import { Store } from 'vuex'
-import { Route } from 'vue-router'
+import { RouteLocationNormalizedLoaded } from 'vue-router'
 import { MaybeRef, useTranslations } from 'web-pkg'
 
 interface AppDocumentTitleOptions {
@@ -12,7 +12,7 @@ interface AppDocumentTitleOptions {
   applicationId: string
   applicationName?: MaybeRef<string>
   currentFileContext: Ref<FileContext>
-  currentRoute?: Ref<Route>
+  currentRoute?: Ref<RouteLocationNormalizedLoaded>
 }
 
 export function useAppDocumentTitle({
@@ -28,7 +28,7 @@ export function useAppDocumentTitle({
   const titleSegments = computed(() => {
     const baseTitle =
       basename(unref(unref(currentFileContext).fileName)) ||
-      $gettext(unref(currentRoute)?.meta?.title)
+      $gettext(unref(currentRoute)?.meta?.title as string)
     const meta = unref(unref(appMeta).applicationMeta)
 
     return [baseTitle, unref(applicationName) || meta.name || meta.id].filter(Boolean)
diff --git a/packages/web-pkg/src/composables/appDefaults/useAppFolderHandling.ts b/packages/web-pkg/src/composables/appDefaults/useAppFolderHandling.ts
index 9cb14f526c3..407d63ac75d 100644
--- a/packages/web-pkg/src/composables/appDefaults/useAppFolderHandling.ts
+++ b/packages/web-pkg/src/composables/appDefaults/useAppFolderHandling.ts
@@ -4,14 +4,14 @@ import { dirname } from 'path'
 import { ClientService, MaybeRef, useAppFileHandling } from 'web-pkg'
 import { Resource } from 'web-client'
 import { FileContext } from './types'
-import { Route } from 'vue-router'
+import { RouteLocationNormalizedLoaded } from 'vue-router'
 import { useFileRouteReplace } from '../router/useFileRouteReplace'
 import { DavProperty } from 'web-client/src/webdav/constants'
 import { useAuthService } from '../authContext/useAuthService'
 
 interface AppFolderHandlingOptions {
   store: Store<any>
-  currentRoute: Ref<Route>
+  currentRoute: Ref<RouteLocationNormalizedLoaded>
   clientService?: ClientService
 }
 
diff --git a/packages/web-pkg/src/composables/appDefaults/useAppNavigation.ts b/packages/web-pkg/src/composables/appDefaults/useAppNavigation.ts
index 9ef1104b3d4..13f9d7296bc 100644
--- a/packages/web-pkg/src/composables/appDefaults/useAppNavigation.ts
+++ b/packages/web-pkg/src/composables/appDefaults/useAppNavigation.ts
@@ -1,9 +1,9 @@
 import { unref } from 'vue'
-import { Location, Router } from 'vue-router'
+import { RouteLocation, Router, RouteParams } from 'vue-router'
 
 import { MaybeRef } from '../../utils'
 import { FileContext } from './types'
-import { LocationQuery, LocationParams } from '../router'
+import { LocationQuery } from '../router'
 import { Resource } from 'web-client'
 import { useFileRouteReplace } from '../router/useFileRouteReplace'
 
@@ -29,7 +29,7 @@ const contextRouteQueryKey = 'contextRouteQuery'
   and break them here once on purpose in encapsulated
   functions
 */
-export const routeToContextQuery = (location: Location): LocationQuery => {
+export const routeToContextQuery = (location: RouteLocation): LocationQuery => {
   const { params, query } = location
 
   const contextQuery = {}
@@ -48,7 +48,7 @@ export const routeToContextQuery = (location: Location): LocationQuery => {
 }
 export const contextQueryToFileContextProps = (
   query: LocationQuery
-): { routeName: string; routeParams: LocationParams; routeQuery: LocationQuery } => {
+): { routeName: string; routeParams: RouteParams; routeQuery: LocationQuery } => {
   return {
     routeName: queryItemAsString(query[contextRouteNameKey]),
     routeParams: query[contextRouteParamsKey] as any,
diff --git a/packages/web-pkg/src/composables/authContext/useRequest.ts b/packages/web-pkg/src/composables/authContext/useRequest.ts
index 15d4fefac8e..77c27318592 100644
--- a/packages/web-pkg/src/composables/authContext/useRequest.ts
+++ b/packages/web-pkg/src/composables/authContext/useRequest.ts
@@ -1,18 +1,17 @@
 import { unref } from 'vue'
 import { useClientService } from '../clientService'
 import type { Store } from 'vuex'
-import type { Route } from 'vue-router'
+import type { Router, RouteLocationNormalizedLoaded } from 'vue-router'
 import type { Method, AxiosRequestConfig, AxiosResponse } from 'axios'
 import { ClientService } from '../../services'
 import { useAccessToken, usePublicLinkPassword, usePublicLinkToken, usePublicLinkContext } from './'
 import { useStore } from '../store'
-import Router from 'vue-router'
 
 interface RequestOptions {
   router?: Router
   store?: Store<any>
   clientService?: ClientService
-  currentRoute?: Route
+  currentRoute?: RouteLocationNormalizedLoaded
 }
 
 export interface RequestResult {
diff --git a/packages/web-pkg/src/composables/router/types.ts b/packages/web-pkg/src/composables/router/types.ts
index f0880de49b6..c35e7a23f3b 100644
--- a/packages/web-pkg/src/composables/router/types.ts
+++ b/packages/web-pkg/src/composables/router/types.ts
@@ -6,7 +6,6 @@ export type QueryValue = string | (string | null)[]
 export type LocationQuery = Dictionary<QueryValue>
 
 export type ParamValue = string
-export type LocationParams = Dictionary<ParamValue>
 
 export const authContextValues = ['anonymous', 'user', 'publicLink', 'hybrid'] as const
 export type AuthContext = typeof authContextValues[number]
diff --git a/packages/web-pkg/src/composables/router/useActiveApp.ts b/packages/web-pkg/src/composables/router/useActiveApp.ts
index 4f35b7f82c7..84c378ba035 100644
--- a/packages/web-pkg/src/composables/router/useActiveApp.ts
+++ b/packages/web-pkg/src/composables/router/useActiveApp.ts
@@ -1,7 +1,8 @@
 import { computed, ComputedRef, unref } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute } from './useRoute'
+import { RouteLocationNormalizedLoaded } from 'vue-router'
 
-export const activeApp = (route: Route): string => {
+export const activeApp = (route: RouteLocationNormalizedLoaded): string => {
   return route.path.split('/')[1]
 }
 
diff --git a/packages/web-pkg/src/composables/router/useFileRouteReplace.ts b/packages/web-pkg/src/composables/router/useFileRouteReplace.ts
index 19564a9ab47..ba7c4dda48b 100644
--- a/packages/web-pkg/src/composables/router/useFileRouteReplace.ts
+++ b/packages/web-pkg/src/composables/router/useFileRouteReplace.ts
@@ -2,7 +2,7 @@ import { useRouter } from './useRouter'
 import { useConfigurationManager } from '../configuration'
 import { Resource, SpaceResource } from 'web-client/src/helpers'
 import { createFileRouteOptions, mergeFileRouteOptions } from '../../helpers/router'
-import Router from 'vue-router'
+import { Router } from 'vue-router'
 import { ConfigurationManager } from '../../configuration'
 import { unref } from 'vue'
 
diff --git a/packages/web-pkg/src/composables/router/useRouteName.ts b/packages/web-pkg/src/composables/router/useRouteName.ts
index 75af9e9028f..c2543e5d236 100644
--- a/packages/web-pkg/src/composables/router/useRouteName.ts
+++ b/packages/web-pkg/src/composables/router/useRouteName.ts
@@ -4,6 +4,6 @@ import { useRoute } from './useRoute'
 export const useRouteName = (): ComputedRef<string> => {
   const route = useRoute()
   return computed(() => {
-    return unref(route).name
+    return unref(route).name as string
   })
 }
diff --git a/packages/web-pkg/src/composables/router/useRouteQuery.ts b/packages/web-pkg/src/composables/router/useRouteQuery.ts
index 198d596237c..7b7ce5d152f 100644
--- a/packages/web-pkg/src/composables/router/useRouteQuery.ts
+++ b/packages/web-pkg/src/composables/router/useRouteQuery.ts
@@ -14,6 +14,7 @@ export const useRouteQuery = (name: string, defaultValue?: QueryValue): Ref<Quer
         return
       }
       await router.replace({
+        ...unref(router.currentRoute),
         query: {
           ...unref(router.currentRoute).query,
           [name]: v
diff --git a/packages/web-pkg/src/helpers/router/routeOptions.ts b/packages/web-pkg/src/helpers/router/routeOptions.ts
index acb399fdb7c..fcbdc51dabb 100644
--- a/packages/web-pkg/src/helpers/router/routeOptions.ts
+++ b/packages/web-pkg/src/helpers/router/routeOptions.ts
@@ -1,8 +1,8 @@
 import { isShareSpaceResource, Resource, SpaceResource } from 'web-client/src/helpers'
 import { configurationManager, ConfigurationManager } from '../../configuration'
-import { LocationParams, LocationQuery } from '../../composables'
+import { LocationQuery } from '../../composables'
 import { isUndefined } from 'lodash-es'
-import { Route } from 'vue-router'
+import { RouteLocation, RouteParams } from 'vue-router'
 
 /**
  * Creates route options for routing into a file location:
@@ -20,7 +20,7 @@ export const createFileRouteOptions = (
   space: SpaceResource,
   target: { path?: string; fileId?: string | number },
   options?: { configurationManager?: ConfigurationManager }
-): { params: LocationParams; query: LocationQuery } => {
+): { params: RouteParams; query: LocationQuery } => {
   const config = options?.configurationManager || configurationManager
   return {
     params: {
@@ -35,9 +35,9 @@ export const createFileRouteOptions = (
 }
 
 export const mergeFileRouteOptions = (
-  originalRoute: Route,
-  routeOptions: { params: LocationParams; query: LocationQuery }
-): Route => {
+  originalRoute: RouteLocation,
+  routeOptions: { params: RouteParams; query: LocationQuery }
+): RouteLocation => {
   return Object.assign({}, originalRoute, {
     params: {
       ...originalRoute.params,
diff --git a/packages/web-pkg/tests/unit/composables/router/useRouteQuery.spec.ts b/packages/web-pkg/tests/unit/composables/router/useRouteQuery.spec.ts
index b0664839de2..0f69f30f784 100644
--- a/packages/web-pkg/tests/unit/composables/router/useRouteQuery.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/router/useRouteQuery.spec.ts
@@ -4,7 +4,12 @@ import { getComposableWrapper, createRouter } from 'web-test-helpers'
 
 describe('useRouteQuery', () => {
   it('is reactive', async () => {
-    const router = createRouter()
+    const router = createRouter({
+      routes: [{ path: '/', redirect: null }]
+    })
+    router.push('/')
+    await router.isReady()
+
     let fooQuery: Ref
     let fooValue: ComputedRef
 
@@ -33,16 +38,22 @@ describe('useRouteQuery', () => {
     expect(fooValue.value).toBe(1)
 
     fooQuery.value = '2'
-    await nextTick()
+
+    // FIXME: why do we have to wait for so many ticks?
+    // Why don't we have to do that for any other expectation in the whole file?!
+    for (let i = 0; i < 32; i++) {
+      await nextTick()
+    }
+
     expect(wrapper.find('#fooQuery').element.innerHTML).toBe('2')
     expect(wrapper.find('#fooValue').element.innerHTML).toBe('2')
 
-    await router.push({ query: { foo: '3' } })
+    await router.push({ path: '/', query: { foo: '3' } })
     await nextTick()
     expect(wrapper.find('#fooQuery').element.innerHTML).toBe('3')
     expect(wrapper.find('#fooValue').element.innerHTML).toBe('3')
 
-    await router.push({})
+    await router.push({ path: '/', query: {} })
     await nextTick()
     expect(wrapper.find('#fooQuery').element.innerHTML).toBe('1')
     expect(wrapper.find('#fooValue').element.innerHTML).toBe('1')
@@ -53,12 +64,13 @@ describe('useRouteQuery', () => {
 
     const mocks = { $router: router }
     getComposableWrapper(
-      () => {
+      async () => {
         const fooQuery = useRouteQuery('foo', 'defaultValue')
 
         expect(fooQuery.value).toBe('defaultValue')
 
-        router.push({ query: { foo: 'foo-1' } })
+        router.push({ path: '/', query: { foo: 'foo-1' } })
+        await nextTick()
         expect(fooQuery.value).toBe('foo-1')
 
         router.push({})
@@ -73,11 +85,12 @@ describe('useRouteQuery', () => {
 
     const mocks = { $router: router }
     getComposableWrapper(
-      () => {
+      async () => {
         const fooQuery = useRouteQuery('foo')
         const barQuery = useRouteQuery('bar')
 
-        router.push({ query: { foo: 'foo-1' } })
+        router.push({ path: '/', query: { foo: 'foo-1' } })
+        await nextTick()
         expect(fooQuery.value).toBe('foo-1')
         expect(barQuery.value).toBeFalsy()
 
@@ -98,10 +111,11 @@ describe('useRouteQuery', () => {
 
     const mocks = { $router: router }
     getComposableWrapper(
-      () => {
+      async () => {
         const fooQuery = useRouteQuery('foo')
 
         router.push({ path: '/home', query: { foo: 'bar' } })
+        await nextTick()
         expect(fooQuery.value).toBe('bar')
 
         router.push({ path: '/sub' })
@@ -116,13 +130,14 @@ describe('useRouteQuery', () => {
 
     const mocks = { $router: router }
     getComposableWrapper(
-      () => {
+      async () => {
         const fooQuery = useRouteQuery('foo')
 
         router.push({ path: '/home' })
         expect(fooQuery.value).toBeUndefined()
 
         fooQuery.value = 'changedThroughRef'
+        await nextTick()
         expect(unref(router.currentRoute).query.foo).toBe('changedThroughRef')
       },
       { mocks }
diff --git a/packages/web-pkg/tests/unit/mixins/spaces/delete.spec.ts b/packages/web-pkg/tests/unit/mixins/spaces/delete.spec.ts
index 1a01682d23c..63fc16a26e9 100644
--- a/packages/web-pkg/tests/unit/mixins/spaces/delete.spec.ts
+++ b/packages/web-pkg/tests/unit/mixins/spaces/delete.spec.ts
@@ -6,9 +6,10 @@ import {
   defaultPlugins,
   mockAxiosResolve,
   mount,
-  defaultStoreMockOptions
+  defaultStoreMockOptions,
+  RouteLocation
 } from 'web-test-helpers'
-import { mockDeep } from 'jest-mock-extended'
+import { mock, mockDeep } from 'jest-mock-extended'
 import { clientService } from 'web-pkg'
 import { Graph } from 'web-client'
 
@@ -119,7 +120,9 @@ function getWrapper(graphMock = mockDeep<Graph>()) {
     wrapper: mount(Component, {
       global: {
         plugins: [...defaultPlugins(), store],
-        mocks: defaultComponentMocks({ currentRoute: { name: 'files-spaces-projects' } })
+        mocks: defaultComponentMocks({
+          currentRoute: mock<RouteLocation>({ name: 'files-spaces-projects' })
+        })
       }
     })
   }
diff --git a/packages/web-pkg/tests/unit/mixins/spaces/disable.spec.ts b/packages/web-pkg/tests/unit/mixins/spaces/disable.spec.ts
index 2088567e7c7..abdda2d8e1e 100644
--- a/packages/web-pkg/tests/unit/mixins/spaces/disable.spec.ts
+++ b/packages/web-pkg/tests/unit/mixins/spaces/disable.spec.ts
@@ -6,9 +6,10 @@ import {
   defaultPlugins,
   mockAxiosResolve,
   mount,
-  defaultStoreMockOptions
+  defaultStoreMockOptions,
+  RouteLocation
 } from 'web-test-helpers'
-import { mockDeep } from 'jest-mock-extended'
+import { mock, mockDeep } from 'jest-mock-extended'
 import { Graph } from 'web-client'
 import { clientService } from 'web-pkg'
 
@@ -116,7 +117,9 @@ function getWrapper(graphMock = mockDeep<Graph>()) {
     wrapper: mount(Component, {
       global: {
         plugins: [...defaultPlugins(), store],
-        mocks: defaultComponentMocks({ currentRoute: { name: 'files-spaces-projects' } })
+        mocks: defaultComponentMocks({
+          currentRoute: mock<RouteLocation>({ name: 'files-spaces-projects' })
+        })
       }
     })
   }
diff --git a/packages/web-pkg/tests/unit/mixins/spaces/editDescription.spec.ts b/packages/web-pkg/tests/unit/mixins/spaces/editDescription.spec.ts
index 1ac65576fbe..e0a5852e03e 100644
--- a/packages/web-pkg/tests/unit/mixins/spaces/editDescription.spec.ts
+++ b/packages/web-pkg/tests/unit/mixins/spaces/editDescription.spec.ts
@@ -5,9 +5,10 @@ import {
   defaultPlugins,
   mockAxiosResolve,
   mount,
-  defaultStoreMockOptions
+  defaultStoreMockOptions,
+  RouteLocation
 } from 'web-test-helpers'
-import { mockDeep } from 'jest-mock-extended'
+import { mock, mockDeep } from 'jest-mock-extended'
 import { Graph } from 'web-client'
 import { clientService } from 'web-pkg'
 
@@ -71,7 +72,9 @@ function getWrapper(graphMock = mockDeep<Graph>()) {
     wrapper: mount(Component, {
       global: {
         plugins: [...defaultPlugins(), store],
-        mocks: defaultComponentMocks({ currentRoute: { name: 'files-spaces-projects' } })
+        mocks: defaultComponentMocks({
+          currentRoute: mock<RouteLocation>({ name: 'files-spaces-projects' })
+        })
       }
     })
   }
diff --git a/packages/web-pkg/tests/unit/mixins/spaces/navigate.spec.ts b/packages/web-pkg/tests/unit/mixins/spaces/navigate.spec.ts
index e2d246c8b0b..e873bf3d162 100644
--- a/packages/web-pkg/tests/unit/mixins/spaces/navigate.spec.ts
+++ b/packages/web-pkg/tests/unit/mixins/spaces/navigate.spec.ts
@@ -1,10 +1,12 @@
+import { mock } from 'jest-mock-extended'
 import Navigate from 'web-pkg/src/mixins/spaces/navigate'
 import {
   createStore,
   defaultComponentMocks,
   defaultPlugins,
   mount,
-  defaultStoreMockOptions
+  defaultStoreMockOptions,
+  RouteLocation
 } from 'web-test-helpers'
 
 const Component = {
@@ -46,7 +48,7 @@ describe('navigate', () => {
 })
 
 function getWrapper({ invalidLocation = false } = {}) {
-  const currentRoute = { name: '', params: { driveAliasAndItem: '' } }
+  const currentRoute = mock<RouteLocation>({ name: '', params: { driveAliasAndItem: '' } })
   if (invalidLocation) {
     currentRoute.name = 'files-spaces-generic'
   } else {
diff --git a/packages/web-pkg/tests/unit/mixins/spaces/rename.spec.ts b/packages/web-pkg/tests/unit/mixins/spaces/rename.spec.ts
index 8b81ba1b12f..9c2b907e952 100644
--- a/packages/web-pkg/tests/unit/mixins/spaces/rename.spec.ts
+++ b/packages/web-pkg/tests/unit/mixins/spaces/rename.spec.ts
@@ -1,5 +1,5 @@
 import rename from 'web-pkg/src/mixins/spaces/rename'
-import { mockDeep } from 'jest-mock-extended'
+import { mock, mockDeep } from 'jest-mock-extended'
 import { Graph } from 'web-client'
 import { clientService } from 'web-pkg'
 import {
@@ -8,7 +8,8 @@ import {
   defaultPlugins,
   mockAxiosResolve,
   mount,
-  defaultStoreMockOptions
+  defaultStoreMockOptions,
+  RouteLocation
 } from 'web-test-helpers'
 
 const Component = {
@@ -102,7 +103,9 @@ function getWrapper(graphMock = mockDeep<Graph>()) {
     wrapper: mount(Component, {
       global: {
         plugins: [...defaultPlugins(), store],
-        mocks: defaultComponentMocks({ currentRoute: { name: 'files-spaces-projects' } })
+        mocks: defaultComponentMocks({
+          currentRoute: mock<RouteLocation>({ name: 'files-spaces-projects' })
+        })
       }
     })
   }
diff --git a/packages/web-pkg/tests/unit/mixins/spaces/restore.spec.ts b/packages/web-pkg/tests/unit/mixins/spaces/restore.spec.ts
index 99344bc86c7..630e83bce6e 100644
--- a/packages/web-pkg/tests/unit/mixins/spaces/restore.spec.ts
+++ b/packages/web-pkg/tests/unit/mixins/spaces/restore.spec.ts
@@ -1,6 +1,6 @@
 import restore from 'web-pkg/src/mixins/spaces/restore'
 import { buildSpace } from 'web-client/src/helpers'
-import { mockDeep } from 'jest-mock-extended'
+import { mock, mockDeep } from 'jest-mock-extended'
 import { Graph } from 'web-client'
 import { clientService } from 'web-pkg'
 import {
@@ -9,7 +9,8 @@ import {
   defaultPlugins,
   mockAxiosResolve,
   mount,
-  defaultStoreMockOptions
+  defaultStoreMockOptions,
+  RouteLocation
 } from 'web-test-helpers'
 
 const Component = {
@@ -117,7 +118,9 @@ function getWrapper(graphMock = mockDeep<Graph>()) {
     wrapper: mount(Component, {
       global: {
         plugins: [...defaultPlugins(), store],
-        mocks: defaultComponentMocks({ currentRoute: { name: 'files-spaces-projects' } })
+        mocks: defaultComponentMocks({
+          currentRoute: mock<RouteLocation>({ name: 'files-spaces-projects' })
+        })
       }
     })
   }
diff --git a/packages/web-pkg/tests/unit/mixins/spaces/setReadme.spec.ts b/packages/web-pkg/tests/unit/mixins/spaces/setReadme.spec.ts
index f9fd3a7a459..e220e73a8bf 100644
--- a/packages/web-pkg/tests/unit/mixins/spaces/setReadme.spec.ts
+++ b/packages/web-pkg/tests/unit/mixins/spaces/setReadme.spec.ts
@@ -1,13 +1,14 @@
 import setReadme from 'web-pkg/src/mixins/spaces/setReadme'
 import { buildSpace } from 'web-client/src/helpers'
-import { mockDeep } from 'jest-mock-extended'
+import { mock, mockDeep } from 'jest-mock-extended'
 import { OwnCloudSdk } from 'web-client/src/types'
 import {
   createStore,
   defaultPlugins,
   mount,
   defaultStoreMockOptions,
-  defaultComponentMocks
+  defaultComponentMocks,
+  RouteLocation
 } from 'web-test-helpers'
 
 const Component = {
@@ -98,7 +99,9 @@ describe('setReadme', () => {
 
 function getWrapper(resolveGetFileContents = true, space = undefined) {
   const clientMock = mockDeep<OwnCloudSdk>()
-  const defaultMocks = defaultComponentMocks({ currentRoute: { name: 'files-spaces-generic' } })
+  const defaultMocks = defaultComponentMocks({
+    currentRoute: mock<RouteLocation>({ name: 'files-spaces-generic' })
+  })
   const mocks = {
     ...defaultMocks,
     $client: {
diff --git a/packages/web-runtime/src/container/api.ts b/packages/web-runtime/src/container/api.ts
index 59b39e0eb37..1cf52079513 100644
--- a/packages/web-runtime/src/container/api.ts
+++ b/packages/web-runtime/src/container/api.ts
@@ -1,4 +1,4 @@
-import { RouteConfig, Router } from 'vue-router'
+import { RouteRecordRaw, Router } from 'vue-router'
 import clone from 'lodash-es/clone'
 import {
   RuntimeApi,
@@ -18,7 +18,7 @@ import { App, Component, h } from 'vue'
  * @param router
  * @param routes
  */
-const announceRoutes = (applicationId: string, router: Router, routes: RouteConfig[]): void => {
+const announceRoutes = (applicationId: string, router: Router, routes: RouteRecordRaw[]): void => {
   if (!isArray(routes)) {
     throw new ApiError("routes can't be blank")
   }
@@ -33,7 +33,8 @@ const announceRoutes = (applicationId: string, router: Router, routes: RouteConf
 
       const route = clone(applicationRoute)
       if (route.name) {
-        route.name = applicationId === route.name ? route.name : namespaceRouteName(route.name)
+        route.name =
+          applicationId === route.name ? route.name : namespaceRouteName(String(route.name))
       }
 
       route.path = `/${encodeURI(applicationId)}${route.path}`
@@ -46,7 +47,7 @@ const announceRoutes = (applicationId: string, router: Router, routes: RouteConf
 
           const r = clone(childRoute)
           if (childRoute.name) {
-            r.name = namespaceRouteName(childRoute.name)
+            r.name = namespaceRouteName(String(childRoute.name))
           }
           return r
         })
@@ -250,7 +251,8 @@ export const buildRuntimeApi = ({
   }
 
   return {
-    announceRoutes: (routes: RouteConfig[]): void => announceRoutes(applicationId, router, routes),
+    announceRoutes: (routes: RouteRecordRaw[]): void =>
+      announceRoutes(applicationId, router, routes),
     announceNavigationItems: (navigationItems: ApplicationNavigationItem[]): void =>
       announceNavigationItems(applicationId, store, navigationItems),
     announceTranslations: (appTranslations: ApplicationTranslations): void =>
diff --git a/packages/web-runtime/src/container/types.ts b/packages/web-runtime/src/container/types.ts
index 594fe6e5ccc..5ab5c360fc4 100644
--- a/packages/web-runtime/src/container/types.ts
+++ b/packages/web-runtime/src/container/types.ts
@@ -1,5 +1,5 @@
 import { Store } from 'vuex'
-import { RouteConfig, Router } from 'vue-router'
+import { RouteRecordRaw, Router } from 'vue-router'
 import { App, Component } from 'vue'
 
 /** shim configuration for now, should be typed in a later step */
@@ -65,7 +65,7 @@ export interface ApplicationTranslations {
 export interface ClassicApplicationScript {
   appInfo?: ApplicationInformation
   store?: Store<any>
-  routes?: RouteConfig[]
+  routes?: RouteRecordRaw[]
   navItems?: ApplicationNavigationItem[]
   quickActions?: ApplicationQuickActions
   translations?: ApplicationTranslations
@@ -76,7 +76,7 @@ export interface ClassicApplicationScript {
 
 /** RuntimeApi defines the publicly available runtime api */
 export interface RuntimeApi {
-  announceRoutes: (routes: RouteConfig[]) => void
+  announceRoutes: (routes: RouteRecordRaw[]) => void
   announceNavigationItems: (navigationItems: ApplicationNavigationItem[]) => void
   announceTranslations: (appTranslations: ApplicationTranslations) => void
   announceQuickActions: (quickActions: ApplicationQuickActions) => void
diff --git a/packages/web-runtime/src/router/helpers.ts b/packages/web-runtime/src/router/helpers.ts
index eae077c09be..2de0d769138 100644
--- a/packages/web-runtime/src/router/helpers.ts
+++ b/packages/web-runtime/src/router/helpers.ts
@@ -1,9 +1,9 @@
 import { base, router } from './index'
-import { Route, Router, RouteRecordPublic } from 'vue-router'
+import { RouteLocation, RouteParams, Router, RouteRecordNormalized } from 'vue-router'
 import {
+  AuthContext,
   authContextValues,
   contextQueryToFileContextProps,
-  LocationParams,
   WebRouteMeta
 } from 'web-pkg/src/composables'
 
@@ -44,7 +44,7 @@ export const buildUrl = (pathname) => {
  * @param to {Route}
  * @returns {boolean}
  */
-export const isUserContext = (router: Router, to: Route): boolean => {
+export const isUserContext = (router: Router, to: RouteLocation): boolean => {
   const meta = getRouteMeta(to)
   if (meta.authContext === 'user') {
     return true
@@ -54,7 +54,10 @@ export const isUserContext = (router: Router, to: Route): boolean => {
   }
 
   const contextRoute = getContextRoute(router, to)
-  return !contextRoute || getRouteMeta({ meta: contextRoute.meta } as Route).authContext === 'user'
+  return (
+    !contextRoute ||
+    getRouteMeta({ meta: contextRoute.meta } as RouteLocation).authContext === 'user'
+  )
 }
 
 /**
@@ -64,8 +67,8 @@ export const isUserContext = (router: Router, to: Route): boolean => {
  * @param to {Route}
  * @returns {boolean}
  */
-export const isPublicLinkContext = (router: Router, to: Route): boolean => {
-  if (to.params.driveAliasAndItem?.startsWith('public/')) {
+export const isPublicLinkContext = (router: Router, to: RouteLocation): boolean => {
+  if ((to.params.driveAliasAndItem as string)?.startsWith('public/')) {
     return true
   }
 
@@ -79,7 +82,8 @@ export const isPublicLinkContext = (router: Router, to: Route): boolean => {
 
   const contextRoute = getContextRoute(router, to)
   return (
-    contextRoute && getRouteMeta({ meta: contextRoute.meta } as Route).authContext === 'publicLink'
+    contextRoute &&
+    getRouteMeta({ meta: contextRoute.meta } as RouteLocation).authContext === 'publicLink'
   )
 }
 
@@ -89,7 +93,7 @@ export const isPublicLinkContext = (router: Router, to: Route): boolean => {
  * @param to {Route}
  * @returns {string}
  */
-export const extractPublicLinkToken = (to: Route): string => {
+export const extractPublicLinkToken = (to: RouteLocation): string => {
   const contextRouteParams = contextQueryToFileContextProps(to.query)?.routeParams
   if (contextRouteParams) {
     return extractPublicLinkTokenFromRouteParams(contextRouteParams)
@@ -102,14 +106,14 @@ export const extractPublicLinkToken = (to: Route): string => {
  *
  * @param params {LocationParams}
  */
-const extractPublicLinkTokenFromRouteParams = (params: LocationParams): string => {
+const extractPublicLinkTokenFromRouteParams = (params: RouteParams): string => {
   if (Object.prototype.hasOwnProperty.call(params, 'driveAliasAndItem')) {
-    if (!params.driveAliasAndItem.startsWith('public/')) {
+    if (!(params.driveAliasAndItem as string).startsWith('public/')) {
       return ''
     }
-    return params.driveAliasAndItem.split('/')[1]
+    return (params.driveAliasAndItem as string).split('/')[1]
   }
-  return (params.item || params.filePath || params.token || '').split('/')[0]
+  return ((params.item || params.filePath || params.token || '') as string).split('/')[0]
 }
 
 /**
@@ -119,7 +123,7 @@ const extractPublicLinkTokenFromRouteParams = (params: LocationParams): string =
  * @param to {Route}
  * @returns {boolean}
  */
-export const isAnonymousContext = (router: Router, to: Route): boolean => {
+export const isAnonymousContext = (router: Router, to: RouteLocation): boolean => {
   return getRouteMeta(to).authContext === 'anonymous'
 }
 
@@ -133,7 +137,7 @@ export const isAnonymousContext = (router: Router, to: Route): boolean => {
  * the preview app is supposed to load files from is transported via the contextRouteName, contextRouteParams and contextRouteQuery
  * in the URL (provided by the context that opens the preview app in the first place).
  */
-const getContextRoute = (router: Router, to: Route): RouteRecordPublic | null => {
+const getContextRoute = (router: Router, to: RouteLocation): RouteRecordNormalized | null => {
   const contextRouteNameKey = 'contextRouteName'
   if (!to.query || !to.query[contextRouteNameKey]) {
     return null
@@ -142,7 +146,7 @@ const getContextRoute = (router: Router, to: Route): RouteRecordPublic | null =>
   return router.getRoutes().find((r) => r.name === to.query[contextRouteNameKey])
 }
 
-const getRouteMeta = (to: Route): WebRouteMeta => {
+const getRouteMeta = (to: RouteLocation): WebRouteMeta => {
   if (!to.meta) {
     return {
       authContext: 'user'
@@ -153,18 +157,20 @@ const getRouteMeta = (to: Route): WebRouteMeta => {
   if (!to.meta.authContext && Object.prototype.hasOwnProperty.call(to.meta, 'auth')) {
     to.meta.authContext = to.meta.auth ? 'user' : 'hybrid'
     console.warn(
-      `route key meta.auth is deprecated. Please switch to meta.authContext="${to.meta.authContext}" in route "${to.name}".`
+      `route key meta.auth is deprecated. Please switch to meta.authContext="${
+        to.meta.authContext
+      }" in route "${String(to.name)}".`
     )
   }
 
   if (to?.meta?.authContext) {
-    if (authContextValues.includes(to.meta.authContext)) {
+    if (authContextValues.includes(to.meta.authContext as AuthContext)) {
       return to.meta
     }
     console.warn(
-      `invalid authContext "${to.meta.authContext}" in route "${
+      `invalid authContext "${to.meta.authContext}" in route "${String(
         to.name
-      }". must be one of [${authContextValues.join(', ')}].`
+      )}". must be one of [${authContextValues.join(', ')}].`
     )
   }
   if (to?.meta) {
diff --git a/packages/web-runtime/src/router/index.ts b/packages/web-runtime/src/router/index.ts
index 0ddc6b95673..41c0e431cb6 100644
--- a/packages/web-runtime/src/router/index.ts
+++ b/packages/web-runtime/src/router/index.ts
@@ -22,7 +22,7 @@ function $gettext(msg) {
   return msg
 }
 
-export const createRouter = (options?: RouterOptions) => {
+export const createRouter = (options: RouterOptions) => {
   ;(window as any).__HACK__router = _createRouter(options)
   return (window as any).__HACK__router
 }
diff --git a/packages/web-runtime/src/router/setupAuthGuard.ts b/packages/web-runtime/src/router/setupAuthGuard.ts
index b67221e7e90..4d42533c528 100644
--- a/packages/web-runtime/src/router/setupAuthGuard.ts
+++ b/packages/web-runtime/src/router/setupAuthGuard.ts
@@ -1,5 +1,5 @@
 import { extractPublicLinkToken, isPublicLinkContext, isUserContext } from './index'
-import Router, { Route } from 'vue-router'
+import { Router, RouteLocation } from 'vue-router'
 import Vue from 'vue'
 import { contextRouteNameKey, queryItemAsString } from 'web-pkg/src/composables'
 
@@ -35,7 +35,7 @@ export const setupAuthGuard = (router: Router) => {
   })
 }
 
-export const hasContextRouteNameChanged = (to: Route, from: Route): boolean => {
+export const hasContextRouteNameChanged = (to: RouteLocation, from: RouteLocation): boolean => {
   if (!to.query[contextRouteNameKey] && !from.query[contextRouteNameKey]) {
     return false
   }
diff --git a/packages/web-runtime/src/services/auth/authService.ts b/packages/web-runtime/src/services/auth/authService.ts
index 9a1b4e0350a..0c7e17417b5 100644
--- a/packages/web-runtime/src/services/auth/authService.ts
+++ b/packages/web-runtime/src/services/auth/authService.ts
@@ -3,7 +3,7 @@ import { PublicLinkManager } from './publicLinkManager'
 import { Store } from 'vuex'
 import { ClientService } from 'web-pkg/src/services'
 import { ConfigurationManager } from 'web-pkg/src/configuration'
-import { Route, Router } from 'vue-router'
+import { RouteLocation, Router } from 'vue-router'
 import { extractPublicLinkToken, isPublicLinkContext, isUserContext } from '../../router'
 import { unref } from 'vue'
 
@@ -38,7 +38,7 @@ export class AuthService {
    *
    * @param to {Route}
    */
-  public async initializeContext(to: Route) {
+  public async initializeContext(to: RouteLocation) {
     if (!this.publicLinkManager) {
       this.publicLinkManager = new PublicLinkManager({
         clientService: this.clientService,
@@ -179,7 +179,7 @@ export class AuthService {
     await this.userManager.signinSilentCallback()
   }
 
-  public async handleAuthError(route: Route) {
+  public async handleAuthError(route: RouteLocation) {
     if (isPublicLinkContext(this.router, route)) {
       const token = extractPublicLinkToken(route)
       this.publicLinkManager.clear(token)
diff --git a/packages/web-runtime/tests/unit/router/index.spec.ts b/packages/web-runtime/tests/unit/router/index.spec.ts
index 8e4e8737371..c8e5a6de665 100644
--- a/packages/web-runtime/tests/unit/router/index.spec.ts
+++ b/packages/web-runtime/tests/unit/router/index.spec.ts
@@ -30,6 +30,8 @@ describe('buildUrl', () => {
     const { buildUrl } = await import('../../../src/router')
     jest.resetModules()
 
+    // hide warnings for non-existent routes
+    jest.spyOn(console, 'warn').mockImplementation(() => undefined)
     expect(buildUrl(path)).toBe(expected)
   })
 })
diff --git a/packages/web-test-helpers/src/helpers.ts b/packages/web-test-helpers/src/helpers.ts
index efdf2e639b8..6f76811a377 100644
--- a/packages/web-test-helpers/src/helpers.ts
+++ b/packages/web-test-helpers/src/helpers.ts
@@ -2,6 +2,8 @@ import { createStore as _createStore, StoreOptions } from 'vuex'
 import { mount as _mount, MountingOptions } from '@vue/test-utils'
 import { defineComponent } from 'vue'
 import { defaultPlugins } from 'web-test-helpers'
+import { createRouter as _createRouter } from 'web-runtime/src/router'
+import { createMemoryHistory, RouterOptions } from 'vue-router'
 
 jest.spyOn(console, 'warn').mockImplementation(() => undefined)
 
@@ -41,5 +43,12 @@ export const getStoreInstance = <T>(storeOptions: StoreOptions<T>) => {
   return _createStore(storeOptions)
 }
 
-export { createRouter } from 'web-runtime/src/router'
+export type { RouteLocation } from 'vue-router'
 export { RouterLinkStub } from '@vue/test-utils'
+export const createRouter = (options?: Partial<RouterOptions>) =>
+  _createRouter({
+    history: createMemoryHistory(),
+    routes: [],
+    strict: false,
+    ...options
+  })
diff --git a/packages/web-test-helpers/src/mocks/defaultComponentMocks.ts b/packages/web-test-helpers/src/mocks/defaultComponentMocks.ts
index f0080c518ed..a3b7a681e64 100644
--- a/packages/web-test-helpers/src/mocks/defaultComponentMocks.ts
+++ b/packages/web-test-helpers/src/mocks/defaultComponentMocks.ts
@@ -1,28 +1,24 @@
 import { mockDeep } from 'jest-mock-extended'
 import { ClientService } from 'web-pkg/src/services'
-import Router, { RawLocation, Route } from 'vue-router'
+import { Router, RouteLocationNormalizedLoaded, RouteLocationRaw, RouteLocation } from 'vue-router'
 import { UppyService } from 'web-runtime/src/services/uppyService'
 import { OwnCloudSdk } from 'web-client/src/types'
+import { ref } from 'vue'
 
 export interface ComponentMocksOptions {
   gettext?: boolean
-  currentRoute?: {
-    name?: string
-    path?: string
-    query?: { [key: string]: string }
-    params?: { [key: string]: any }
-  }
+  currentRoute?: RouteLocation
 }
 
 export const defaultComponentMocks = ({
   gettext = true,
   currentRoute = undefined
 }: ComponentMocksOptions = {}) => {
-  const $router = mockDeep<Router>({ ...(currentRoute && { currentRoute }) })
+  const $router = mockDeep<Router>({ ...(currentRoute && { currentRoute: ref(currentRoute) }) })
   $router.resolve.mockImplementation(
-    (to: RawLocation) => ({ href: (to as any).name, location: { path: '' } } as any)
+    (to: RouteLocationRaw) => ({ href: (to as any).name, location: { path: '' } } as any)
   )
-  const $route = mockDeep<Route>()
+  const $route = mockDeep<RouteLocationNormalizedLoaded>()
   $route.path = currentRoute?.path || '/'
 
   // FIXME: this is bad ... we can't override $router like this ....
diff --git a/tests/unit/config/jest.init.js b/tests/unit/config/jest.init.js
index 862161802c0..b70b72f5142 100644
--- a/tests/unit/config/jest.init.js
+++ b/tests/unit/config/jest.init.js
@@ -1,4 +1,4 @@
-import Vue, { configureCompat } from 'vue'
+import Vue, { configureCompat, h } from 'vue'
 import { config } from '@vue/test-utils'
 import fetchMock from 'jest-fetch-mock'
 
@@ -22,11 +22,12 @@ config.mocks = {
 }
 
 Vue.component('RouterLink', {
+  name: 'RouterLink',
   props: {
     tag: { type: String, default: 'a' },
     to: { type: [String, Object], default: '' }
   },
-  render(createElement) {
+  render() {
     let path = this.$props.to
 
     if (!!path && typeof path !== 'string') {
@@ -41,6 +42,6 @@ Vue.component('RouterLink', {
       }
     }
 
-    return createElement(this.tag, { attrs: { href: path } }, this.$slots.default)
+    return h(this.tag, { attrs: { href: path } }, this.$slots.default)
   }
 })

From f83bef06c0a06d923e9fddc0b8f7ed97691f983e Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Sat, 14 Jan 2023 18:32:15 +0100
Subject: [PATCH 10/18] Fix duplicated question mark in urls

---
 packages/web-runtime/src/router/index.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/web-runtime/src/router/index.ts b/packages/web-runtime/src/router/index.ts
index 41c0e431cb6..aa1bb6d5817 100644
--- a/packages/web-runtime/src/router/index.ts
+++ b/packages/web-runtime/src/router/index.ts
@@ -37,8 +37,7 @@ export const router = patchRouter(
     },
     stringifyQuery(obj) {
       return qs.stringify(obj, {
-        allowDots: true,
-        addQueryPrefix: true
+        allowDots: true
       })
     },
     history: (base && createWebHistory(new URL(base.href).pathname)) || createWebHashHistory(),

From 96fe57de20d0635d7d72dc87fa7752aff1482d62 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Sat, 14 Jan 2023 19:56:21 +0100
Subject: [PATCH 11/18] Fix navName computed/selectors

---
 packages/web-app-files/src/router/shares.ts               | 8 +++++++-
 .../src/components/SidebarNav/SidebarNavItem.vue          | 5 ++---
 packages/web-runtime/src/layouts/Application.vue          | 2 +-
 .../SidebarNav/__snapshots__/SidebarNavItem.spec.ts.snap  | 4 ++--
 tests/e2e/support/objects/app-files/page/shares/withMe.ts | 2 +-
 5 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/web-app-files/src/router/shares.ts b/packages/web-app-files/src/router/shares.ts
index ddd768421c1..0d84720ff58 100644
--- a/packages/web-app-files/src/router/shares.ts
+++ b/packages/web-app-files/src/router/shares.ts
@@ -2,11 +2,16 @@ import { RouteComponents } from './router'
 import { RouteLocationNamedRaw, RouteRecordRaw } from 'vue-router'
 import { createLocation, isLocationActiveDirector, $gettext } from './utils'
 
-type shareTypes = 'files-shares-with-me' | 'files-shares-with-others' | 'files-shares-via-link'
+type shareTypes =
+  | 'files-shares'
+  | 'files-shares-with-me'
+  | 'files-shares-with-others'
+  | 'files-shares-via-link'
 
 export const createLocationShares = (name: shareTypes, location = {}): RouteLocationNamedRaw =>
   createLocation(name, location)
 
+export const locationShares = createLocationShares('files-shares')
 export const locationSharesWithMe = createLocationShares('files-shares-with-me')
 export const locationSharesWithOthers = createLocationShares('files-shares-with-others')
 export const locationSharesViaLink = createLocationShares('files-shares-via-link')
@@ -19,6 +24,7 @@ export const isLocationSharesActive = isLocationActiveDirector<shareTypes>(
 
 export const buildRoutes = (components: RouteComponents): RouteRecordRaw[] => [
   {
+    name: locationShares.name,
     path: '/shares',
     component: components.App,
     redirect: locationSharesWithMe,
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
index b9bd55194df..d376c4224b8 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
@@ -24,8 +24,7 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
-
-import get from 'lodash-es/get'
+import { Router } from 'vue-router'
 
 export default defineComponent({
   props: {
@@ -69,7 +68,7 @@ export default defineComponent({
   },
   computed: {
     navName() {
-      return get(this.$router?.resolve(this.target), 'route.name')
+      return (this.$router as Router)?.resolve(this.target, this.$route)?.name || 'route.name'
     },
     toolTip() {
       const value = this.collapsed
diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue
index 258a8a4187b..ee476dd7f9b 100644
--- a/packages/web-runtime/src/layouts/Application.vue
+++ b/packages/web-runtime/src/layouts/Application.vue
@@ -66,7 +66,7 @@ export default defineComponent({
               console.warn(
                 `named components are deprecated, use "default" instead of "${keys.join(
                   ', '
-                )}" on route ${route.name}`
+                )}" on route ${String(route.name)}`
               )
             }
           })
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.ts.snap b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.ts.snap
index 54d961b88ff..4bf446e0eb9 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.ts.snap
@@ -2,12 +2,12 @@
 
 exports[`OcSidebarNav renders navItem with toolTip if collapsed 1`] = `
 <li class="oc-sidebar-nav-item oc-pb-xs oc-px-s" id="123">
-  <router-link-stub class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-sidebar-nav-item-link" data-nav-id="5" to="/files/list/all"></router-link-stub>
+  <router-link-stub class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-sidebar-nav-item-link" data-nav-id="5" data-nav-name="route.name" to="/files/list/all"></router-link-stub>
 </li>
 `;
 
 exports[`OcSidebarNav renders navItem without toolTip if expanded 1`] = `
 <li class="oc-sidebar-nav-item oc-pb-xs oc-px-s" id="123">
-  <router-link-stub class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-sidebar-nav-item-link" data-nav-id="5" to="/files/list/all"></router-link-stub>
+  <router-link-stub class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-sidebar-nav-item-link" data-nav-id="5" data-nav-name="route.name" to="/files/list/all"></router-link-stub>
 </li>
 `;
diff --git a/tests/e2e/support/objects/app-files/page/shares/withMe.ts b/tests/e2e/support/objects/app-files/page/shares/withMe.ts
index e259d7d6faf..af12a930fb5 100644
--- a/tests/e2e/support/objects/app-files/page/shares/withMe.ts
+++ b/tests/e2e/support/objects/app-files/page/shares/withMe.ts
@@ -1,6 +1,6 @@
 import { Page } from 'playwright'
 
-const sharesNavSelector = '//a[@data-nav-name="files-shares-with-me"]'
+const sharesNavSelector = '//a[@data-nav-name="files-shares"]'
 
 export class WithMe {
   #page: Page

From 93ed05cb26ca1f997e49297bda6d445ec91c380f Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Sat, 14 Jan 2023 19:57:22 +0100
Subject: [PATCH 12/18] Simplify navItem activity detection

---
 packages/web-runtime/src/layouts/Application.vue | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue
index ee476dd7f9b..a94f34a624f 100644
--- a/packages/web-runtime/src/layouts/Application.vue
+++ b/packages/web-runtime/src/layouts/Application.vue
@@ -129,10 +129,7 @@ export default defineComponent({
       return items.map((item) => {
         const active = [item.route, ...(item.activeFor || [])]
           .filter(Boolean)
-          .reduce((result, currentItem) => {
-            if (result) {
-              return true
-            }
+          .some((currentItem) => {
             try {
               const comparativeHref = this.$router.resolve(currentItem).href
               return currentHref.startsWith(comparativeHref)
@@ -140,7 +137,8 @@ export default defineComponent({
               console.error(e)
               return false
             }
-          }, false)
+          })
+
         const name = typeof item.name === 'function' ? item.name(this.capabilities) : item.name
 
         return {

From 8ad2b61fc093b8dfeecbb63774e09bc74beea429 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Sat, 14 Jan 2023 20:08:50 +0100
Subject: [PATCH 13/18] Make RouterLink and RouterView global components known
 to TypeScript

---
 package.json   | 3 ++-
 pnpm-lock.yaml | 2 ++
 web.d.ts       | 3 +++
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6dec2a83ab4..9f4f9c48d23 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,8 @@
     "caf": "*",
     "portal-vue": "*",
     "uuid": "*",
-    "vue-demi": "*"
+    "vue-demi": "*",
+    "vue-router": "*"
   },
   "devDependencies": {
     "@babel/core": "7.20.12",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2772b943006..e19707d211b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -103,6 +103,7 @@ importers:
       vue: 3.2.45
       vue-demi: '*'
       vue-gettext: 2.1.12
+      vue-router: '*'
       vue-tsc: 1.0.20
       wait-for-expect: 3.0.2
     dependencies:
@@ -119,6 +120,7 @@ importers:
       vite-plugin-treat-umd-as-commonjs: 0.1.3_vite@4.0.4
       vue: 3.2.45
       vue-demi: 0.13.11_vue@3.2.45
+      vue-router: 4.1.6_vue@3.2.45
     devDependencies:
       '@babel/core': 7.20.12
       '@babel/polyfill': 7.12.1
diff --git a/web.d.ts b/web.d.ts
index ce08c6ba247..72f253d842a 100644
--- a/web.d.ts
+++ b/web.d.ts
@@ -11,6 +11,9 @@ declare module 'vue' {
   export interface GlobalComponents {
     Portal: typeof import('portal-vue')['Portal']
     PortalTarget: typeof import('portal-vue')['PortalTarget']
+
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
   }
 }
 declare module '*.vue' {

From 7f952b8ddff1ede147d50c77c5a867e83b7c1726 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Sun, 15 Jan 2023 00:16:13 +0100
Subject: [PATCH 14/18] Get rid of router global instance

---
 .../web-pkg/src/composables/router/useRouter.ts     |  4 ----
 packages/web-runtime/src/router/index.ts            | 13 ++-----------
 .../src/mocks/defaultComponentMocks.ts              |  3 ---
 3 files changed, 2 insertions(+), 18 deletions(-)

diff --git a/packages/web-pkg/src/composables/router/useRouter.ts b/packages/web-pkg/src/composables/router/useRouter.ts
index c8f15df78cd..830dd04468b 100644
--- a/packages/web-pkg/src/composables/router/useRouter.ts
+++ b/packages/web-pkg/src/composables/router/useRouter.ts
@@ -2,9 +2,5 @@ import { Router } from 'vue-router'
 import { useService } from '../service'
 
 export const useRouter = (): Router => {
-  const hack = (window as any).__HACK__router
-  if (hack) {
-    return hack
-  }
   return useService('$router')
 }
diff --git a/packages/web-runtime/src/router/index.ts b/packages/web-runtime/src/router/index.ts
index aa1bb6d5817..27f67b6f1ea 100644
--- a/packages/web-runtime/src/router/index.ts
+++ b/packages/web-runtime/src/router/index.ts
@@ -8,25 +8,16 @@ import ResolvePublicLinkPage from '../pages/resolvePublicLink.vue'
 import ResolvePrivateLinkPage from '../pages/resolvePrivateLink.vue'
 import { setupAuthGuard } from './setupAuthGuard'
 import { patchRouter } from './patchCleanPath'
-import {
-  createRouter as _createRouter,
-  createWebHashHistory,
-  createWebHistory,
-  RouterOptions
-} from 'vue-router'
+import { createWebHashHistory, createWebHistory, createRouter } from 'vue-router'
 
 export * from './helpers'
+export { createRouter } from 'vue-router'
 
 // just a dummy function to trick gettext tools
 function $gettext(msg) {
   return msg
 }
 
-export const createRouter = (options: RouterOptions) => {
-  ;(window as any).__HACK__router = _createRouter(options)
-  return (window as any).__HACK__router
-}
-
 export const base = document.querySelector('base')
 export const router = patchRouter(
   createRouter({
diff --git a/packages/web-test-helpers/src/mocks/defaultComponentMocks.ts b/packages/web-test-helpers/src/mocks/defaultComponentMocks.ts
index a3b7a681e64..d11885fb334 100644
--- a/packages/web-test-helpers/src/mocks/defaultComponentMocks.ts
+++ b/packages/web-test-helpers/src/mocks/defaultComponentMocks.ts
@@ -21,9 +21,6 @@ export const defaultComponentMocks = ({
   const $route = mockDeep<RouteLocationNormalizedLoaded>()
   $route.path = currentRoute?.path || '/'
 
-  // FIXME: this is bad ... we can't override $router like this ....
-  ;(window as any).__HACK__router = $router
-
   return {
     $router,
     $route,

From 813a5d26f111310d0f46d1bee74d72c2096c8ad1 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Sun, 15 Jan 2023 14:56:45 +0100
Subject: [PATCH 15/18] Fix routing for driveAliasAndItem containing #

---
 packages/web-app-preview/src/App.vue           |  8 ++++----
 .../composables/router/useFileRouteReplace.ts  | 12 ++++--------
 .../src/composables/router/useRouteQuery.ts    |  4 +++-
 .../web-pkg/src/helpers/router/routeOptions.ts | 18 +-----------------
 4 files changed, 12 insertions(+), 30 deletions(-)

diff --git a/packages/web-app-preview/src/App.vue b/packages/web-app-preview/src/App.vue
index be49f921c32..215c8c82327 100644
--- a/packages/web-app-preview/src/App.vue
+++ b/packages/web-app-preview/src/App.vue
@@ -189,7 +189,7 @@ import {
 import AppTopBar from 'web-pkg/src/components/AppTopBar.vue'
 import { loadPreview } from 'web-pkg/src/helpers'
 import { configurationManager } from 'web-pkg/src/configuration'
-import { createFileRouteOptions, mergeFileRouteOptions } from 'web-pkg/src/helpers/router'
+import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 
 export const appId = 'preview'
 
@@ -424,9 +424,9 @@ export default defineComponent({
     },
     // update route and url
     updateLocalHistory() {
-      const routeOptions = mergeFileRouteOptions(
-        this.$route,
-        createFileRouteOptions(unref(this.currentFileContext.space), this.activeFilteredFile)
+      const routeOptions = createFileRouteOptions(
+        unref(this.currentFileContext.space),
+        this.activeFilteredFile
       )
       history.pushState({}, document.title, this.$router.resolve(routeOptions).href)
     },
diff --git a/packages/web-pkg/src/composables/router/useFileRouteReplace.ts b/packages/web-pkg/src/composables/router/useFileRouteReplace.ts
index ba7c4dda48b..f4dd8dd51d5 100644
--- a/packages/web-pkg/src/composables/router/useFileRouteReplace.ts
+++ b/packages/web-pkg/src/composables/router/useFileRouteReplace.ts
@@ -1,10 +1,9 @@
 import { useRouter } from './useRouter'
 import { useConfigurationManager } from '../configuration'
 import { Resource, SpaceResource } from 'web-client/src/helpers'
-import { createFileRouteOptions, mergeFileRouteOptions } from '../../helpers/router'
+import { createFileRouteOptions } from '../../helpers/router'
 import { Router } from 'vue-router'
 import { ConfigurationManager } from '../../configuration'
-import { unref } from 'vue'
 
 export interface FileRouteReplaceOptions {
   router?: Router
@@ -33,12 +32,9 @@ export const useFileRouteReplace = (options: FileRouteReplaceOptions = {}) => {
       return false
     }
 
-    const routeOptions = mergeFileRouteOptions(
-      unref(router.currentRoute),
-      createFileRouteOptions(space, resource, {
-        configurationManager
-      })
-    )
+    const routeOptions = createFileRouteOptions(space, resource, {
+      configurationManager
+    })
     router.replace(routeOptions)
     return true
   }
diff --git a/packages/web-pkg/src/composables/router/useRouteQuery.ts b/packages/web-pkg/src/composables/router/useRouteQuery.ts
index 7b7ce5d152f..9b3f6c2bbaf 100644
--- a/packages/web-pkg/src/composables/router/useRouteQuery.ts
+++ b/packages/web-pkg/src/composables/router/useRouteQuery.ts
@@ -13,8 +13,10 @@ export const useRouteQuery = (name: string, defaultValue?: QueryValue): Ref<Quer
       if (unref(router.currentRoute).query[name] === v) {
         return
       }
+
       await router.replace({
-        ...unref(router.currentRoute),
+        // FIXME: passing the path does not seem to be required at runtime, but somehow is required in tests
+        path: unref(router.currentRoute).path,
         query: {
           ...unref(router.currentRoute).query,
           [name]: v
diff --git a/packages/web-pkg/src/helpers/router/routeOptions.ts b/packages/web-pkg/src/helpers/router/routeOptions.ts
index fcbdc51dabb..1146b96b2f3 100644
--- a/packages/web-pkg/src/helpers/router/routeOptions.ts
+++ b/packages/web-pkg/src/helpers/router/routeOptions.ts
@@ -1,8 +1,8 @@
 import { isShareSpaceResource, Resource, SpaceResource } from 'web-client/src/helpers'
 import { configurationManager, ConfigurationManager } from '../../configuration'
 import { LocationQuery } from '../../composables'
+import { RouteParams } from 'vue-router'
 import { isUndefined } from 'lodash-es'
-import { RouteLocation, RouteParams } from 'vue-router'
 
 /**
  * Creates route options for routing into a file location:
@@ -33,19 +33,3 @@ export const createFileRouteOptions = (
     }
   }
 }
-
-export const mergeFileRouteOptions = (
-  originalRoute: RouteLocation,
-  routeOptions: { params: RouteParams; query: LocationQuery }
-): RouteLocation => {
-  return Object.assign({}, originalRoute, {
-    params: {
-      ...originalRoute.params,
-      ...routeOptions.params
-    },
-    query: {
-      ...originalRoute.query,
-      ...routeOptions.query
-    }
-  })
-}

From cb6329f64056831910376935e0f2a395decef4cc Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Sun, 15 Jan 2023 17:22:08 +0100
Subject: [PATCH 16/18] Fix deprecated redirect to fix acceptance tests

---
 packages/web-app-files/src/router/deprecated.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/router/deprecated.ts b/packages/web-app-files/src/router/deprecated.ts
index 4c7e3702989..e2380a52ca0 100644
--- a/packages/web-app-files/src/router/deprecated.ts
+++ b/packages/web-app-files/src/router/deprecated.ts
@@ -57,7 +57,7 @@ export const buildRoutes = (): RouteLocationNamedRaw[] =>
         })
     },
     {
-      path: '/list/all/:item*',
+      path: '/list/all/:item(.*)',
       redirect: (to) =>
         createLocationSpaces('files-spaces-generic', {
           ...to,
@@ -88,7 +88,7 @@ export const buildRoutes = (): RouteLocationNamedRaw[] =>
       redirect: (to) => createLocationTrash('files-trash-generic', to)
     },
     {
-      path: '/public/list/:item*',
+      path: '/public/list/:item(.*)',
       redirect: (to) => createLocationPublic('files-public-link', to)
     },
     {

From 0b2a7ce86237184dc6b9b1a6321f0a3448e682ac Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Sun, 15 Jan 2023 22:27:24 +0100
Subject: [PATCH 17/18] Fix redirect to accessDenied page on authError

---
 .../web-runtime/src/router/setupAuthGuard.ts  | 34 ++++++++++++++-----
 .../src/services/auth/authService.ts          |  4 +++
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/packages/web-runtime/src/router/setupAuthGuard.ts b/packages/web-runtime/src/router/setupAuthGuard.ts
index 4d42533c528..b778f594e3b 100644
--- a/packages/web-runtime/src/router/setupAuthGuard.ts
+++ b/packages/web-runtime/src/router/setupAuthGuard.ts
@@ -2,36 +2,52 @@ import { extractPublicLinkToken, isPublicLinkContext, isUserContext } from './in
 import { Router, RouteLocation } from 'vue-router'
 import Vue from 'vue'
 import { contextRouteNameKey, queryItemAsString } from 'web-pkg/src/composables'
+import { AuthService } from '../services/auth/authService'
 
 export const setupAuthGuard = (router: Router) => {
-  router.beforeEach(async (to, from, next) => {
+  router.beforeEach(async (to, from) => {
     if (from && to.path === from.path && !hasContextRouteNameChanged(to, from)) {
       // note: except for the context route, query changes can never trigger re-init of the auth context
-      return next()
+      return true
     }
 
     const store = (Vue as any).$store
-    const authService = (Vue as any).$authService
+    const authService = (Vue as any).$authService as AuthService
     await authService.initializeContext(to)
 
+    // vue-router currently (4.1.6) does not cancel navigations when a new one is triggered
+    // we need to guard this case to be able to show the access denied page
+    // and not be redirected to the login page
+    if (authService.hasAuthErrorOccured) {
+      return to.name === 'accessDenied' || { name: 'accessDenied' }
+    }
+
     if (isPublicLinkContext(router, to)) {
       if (!store.getters['runtime/auth/isPublicLinkContextReady']) {
         const publicLinkToken = extractPublicLinkToken(to)
-        return next({
+        return {
           name: 'resolvePublicLink',
           params: { token: publicLinkToken },
           query: { redirectUrl: to.fullPath }
-        })
+        }
       }
-      return next()
+      return true
     }
+
     if (isUserContext(router, to)) {
       if (!store.getters['runtime/auth/isUserContextReady']) {
-        return next({ path: '/login', query: { redirectUrl: to.fullPath } })
+        return { path: '/login', query: { redirectUrl: to.fullPath } }
       }
-      return next()
+      return true
+    }
+    return true
+  })
+  router.afterEach((to) => {
+    if (to.name !== 'accessDenied') {
+      return
     }
-    return next()
+    const authService = (Vue as any).$authService as AuthService
+    authService.hasAuthErrorOccured = false
   })
 }
 
diff --git a/packages/web-runtime/src/services/auth/authService.ts b/packages/web-runtime/src/services/auth/authService.ts
index 0c7e17417b5..708a8984b81 100644
--- a/packages/web-runtime/src/services/auth/authService.ts
+++ b/packages/web-runtime/src/services/auth/authService.ts
@@ -15,6 +15,8 @@ export class AuthService {
   private userManager: UserManager
   private publicLinkManager: PublicLinkManager
 
+  public hasAuthErrorOccured: boolean
+
   public initialize(
     configurationManager: ConfigurationManager,
     clientService: ClientService,
@@ -25,6 +27,7 @@ export class AuthService {
     this.clientService = clientService
     this.store = store
     this.router = router
+    this.hasAuthErrorOccured = false
   }
 
   /**
@@ -109,6 +112,7 @@ export class AuthService {
         await this.resetStateAfterUserLogout()
 
         if (this.userManager.unloadReason === 'authError') {
+          this.hasAuthErrorOccured = true
           return this.router.push({ name: 'accessDenied' })
         }
 

From 817fd9b61a4a049ad6797aa8628d53c1b9beed51 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Mon, 16 Jan 2023 12:07:09 +0100
Subject: [PATCH 18/18] Remove unused variable

---
 packages/web-pkg/src/composables/router/useRoute.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web-pkg/src/composables/router/useRoute.ts b/packages/web-pkg/src/composables/router/useRoute.ts
index 765a0cc6e20..0356ac39123 100644
--- a/packages/web-pkg/src/composables/router/useRoute.ts
+++ b/packages/web-pkg/src/composables/router/useRoute.ts
@@ -3,6 +3,5 @@ import { useRouter } from './useRouter'
 import { RouteLocationNormalizedLoaded } from 'vue-router'
 
 export const useRoute = (): Ref<RouteLocationNormalizedLoaded> => {
-  const router = useRouter()
   return useRouter().currentRoute
 }