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
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)
Upgrade to vue-router v4, where we also changed the Class invocation to use the function createRouter instead (as per the migration docs)
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.
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
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
vue-router
(where vue-router v3 instantiates the router via a Class)createRouter
instead (as per the migration docs)currentRoute
stops working, this includes things like;params
propquery
propsExpected 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 thecreateRouter
function in our utility function.So for instance, if I have the following code:
The application will fail with a runtime error saying
query
is undefined (or whichever property we're trying to access oncurrentRoute
that wouldve worked in vue-router v3.Additional information
Some interesting things I've noticed while trying to figure this issue out;
new VueRouter(...)
call, it'll resolve to a type definition, showing acurrentRoute
property, which also has the expectedparams
, orquery
props.createRouter
function from vue-router 4, it'll resolve to avue-router.mjs
file, which contains all the relevant functions for the router.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 thecreateRouter
function is returning.Here is our utility function, migrated to vue-router v4... if something there could be playing havoc with the resolutions:
Environment info;
Vue version:
Vue-router version:
Vue CLI version:
Webpack version (embedded in the Vue CLI):
Any help or guidance on this would be greatly appreciated <3