Migrating vue-router from v3 to v4 results in unexpected changes to Router signature from createRouter

[arggrande]

Reproduction

n/a

Steps to reproduce the bug

Howdy folks, this is a bit of a strange one, but bear with me and I'll try and explain whats going on because I'm stumped and really need some help.

Steps

1. We have an existing project with vue-router v3, which is using a utility function to export an instance of vue-router (where vue-router v3 instantiates the router via a Class)
2. Upgrade to vue-router v4, where we also changed the Class invocation to use the function createRouter instead (as per the migration docs)
3. Existing routing code that relied on currentRoute stops working, this includes things like;
   • accessing the params prop
   • accessing the query props

Expected behavior

Existing properties from currentRoute still be available and able to be accessed/read.

Actual behavior

Any code using currentRoute fails as the expected props arent on the Router object being created by the createRouter function in our utility function.

So for instance, if I have the following code:

const queryMessage = router.currentRoute.query.message;

The application will fail with a runtime error saying query is undefined (or whichever property we're trying to access on currentRoute that wouldve worked in vue-router v3.

Additional information

Some interesting things I've noticed while trying to figure this issue out;

• If I drill into the relevant node_modules definition (using Webstorm), on the new VueRouter(...) call, it'll resolve to a type definition, showing a currentRoute property, which also has the expected params, or query props.
• If I drill into the relevant node_modules definition (using Webstorm) on the createRouter function from vue-router 4, it'll resolve to a vue-router.mjs file, which contains all the relevant functions for the router.
  • while there is a currentRoute const defined, it looks like it may not be publically exposed? Or something?

This is where things get really hazy for me, because for all intents and purposes on the surface the signatures should be the same, with a currentRoute prop on the type that the createRouter function is returning.

Here is our utility function, migrated to vue-router v4... if something there could be playing havoc with the resolutions:

import { createRouter as createRouterV4, createWebHistory } from 'vue-router'

// ... other stuff

export const createRouter = (base, opts = {}) => createRouterV4({
  history: createWebHistory(base),
  routes: [],
  ...opts,
});

Environment info;

Vue version:
- v3.3.4

Vue-router version:
- v4.2.4

Vue CLI version:
- v5.0.8

Webpack version (embedded in the Vue CLI):
- v5

Any help or guidance on this would be greatly appreciated <3

[arggrande]

I've figured out what was happening here.

Basically in the latest version of vue-router, the currentRoute object was changed to a reactive object, which meant that to access the underlying properties like query, params or fullPath in a normal javascript file (as opposed to a Vue template file), you needed to add a .value to the property chain.

Here's a diff of what I mean:

-const myQueryProperty = router.currentRoute.query.customProperty;
+const myQueryProperty = router.currentRoute.value.query.customProperty

I've raised a PR (see #1976) to update the migration docs, hopefully this is useful to someone else!