[Bug Report][3.1.14] Components built with @/composables/router can crash when routes are missing required params

[MatthewAry]

Environment

Vuetify Version: 3.1.14
Vue Version: 3.2.47
Browsers: Chrome 112.0.0.0
OS: Mac OS 10.15.7

Steps to reproduce

This is a really dirty reproduction. Clone, and npm i and run.
There are two buttons, click on "VBtn Flaw" and then click on the home button in the top right corner.

Expected Behavior

Click on "Router Link" and then click on the home button on the top right corner. And see the expected behavior.

I expect that when you use a named route which is a child to a parent(s) with param(s) that it will inherit the params implicitly from it's parent, you shouldn't need to declare the params that are missing.

Actual Behavior

VBtn in the example crashes when you navigate back to home.

Reproduction Link

https://github.com/MatthewAry/vuetify-route-link-bug

Other comments

This reproduction shows the behavior with RouterLink and with VBtn the to params on the elements shown on those pages are basically the same. I think behaviorally when it comes to routing, there should be no difference between RouterLink and VBtn or any other component that uses @/composables/router

Update: vuejs/router#845 has to do with this exact problem however the issue was closed because the team believed it was resolved. If you build your application in production mode you won't see this issue. See: vuejs/router#845 (comment) Which suggests that this issue may be upstream or that the useLink method in @/composables/router needs to change in some manner to be more similar to what the RouterLink component is doing to avoid this issue. 🤷

Update: See #17176 (comment)

[MatthewAry]

May be related to vuejs/router#845

[MatthewAry]

This issue doesn't seem to be caused by the code related to vuejs/router@4108814 as commenting out the current version of the dev tools code and running the application does not resolve this issue. Instead it seems that the buttons are getting re-rendered when the route changes causing it to re-resolve the route link which becomes impossible because at the time of re-rendering the routable buttons, the router has already changed its state to not have the relevant params.

[MatthewAry]

So after quite a bit of investigation this is what I've learned. Components in Vuetify that make use of the useLink function from Vue Router's RouterLink component, utilize a few ComputedRef properties that useLink returns which are bound to the router's current state. The reactive properties used are:

• route the current RouteLocation & { href: string }
• isActive tells us if the specified route for the link is included in the list of matched routes for the current, "visiting" route
• isExactActive tells us if the current route being visited is the exact same route as the one specified for the link
• href the path to the route specified for the router link. This is extracted from the same route object detailed above.

Vuetify's useLink composable function utilizes the reactive properties listed above (with the exception of href, it gets that from route instead of using the one returned from Vue Router's own useLink function) to turn it's own components into proper links using <a> tags. This functionally similar in many ways to what Vue Router does when you use its RouterLink component. However, for some reason the behavior is different.

What I am seeing is that every time the current route changes, Vuetify's router enabled components get an update, causing it to re-resolve the route for every link. And when the new route is missing params required for the links' named route, the resolution of the href property fails causing the crash. You would expect components to unmount gracefully when you leave a route that loads and renders router link components using named routes which require params, what happens is that this route re-resolve operation takes place BEFORE the components get unmounted. This is basically a race condition.

I have come up with a workaround, but it should be considered a hack and not a solution. This hack works for onRouteEnter but not for when your params change onRouteUpdate, so you'll need to figure out how to handle onRouteUpdate because that will require more considerations depending on your use case.

In the parent component, you need to obtain the current router params and store them in a const.

const routeParams = { ...useRoute().params };

routeParams will end up being assigned the route parameters that were present the moment the parent component was rendered and will be a non-reactive object.

Then in your template you will want to do something like this.

<VBtn :to="{ name: 'RouteName', params: routeParams }">Your Router Link Button</VBtn>

This way you'll be passing in the necessary params to make your link properly resolve even if your route changes to something that doesn't contain the necessary params.

[villageseo]

Awesome work @MatthewAry ! I can confirm your workaround. I also pass params to v-tab (in my case).

[MatthewAry]

I asked @posva about this and he said:

Once you have a boiled down reproduction only with vue router, open a new issue. What you are describing is unlikely caused by the router as that hasn't changed in a long while. we have seen however similar problems when using watchers on the routes and they have been reported in vue core in the past. Maybe that helps you reproduce it
https://discord.com/channels/325477692906536972/325479452773580800/1098990698549743710

[Oleksii14]

Confirming this issue on my side as well 🙏🏻

[MatthewAry]

I have created hack that should satisfy most use-cases but I have not done comprehensive testing of it. My hope is that it will make sure the required params are fed to the routable components. Also, please note that this solution has room for optimization. If you moved the routes map out of the SafelyResolveRouterParams class into a global, and you properly update it when you perform removeRoute and addRoute operations, it should reduce memory and compute for the components that have their own class instance.

https://gist.github.com/MatthewAry/7129cfe405f93bb5827e7cbd7928dd40

Update: safeNamedLocation gets called a lot. For example, Just hovering over an element that is using this method can trigger three function calls.

[1Luc1]

Maybe I don't understand the actual issue or I don't know how to use vue-router "correctly", but isn't the problem, that the params: { pid: '...' } for v-btn :to within the views/example/Example.vue file aren't defined? Like it is in components/HelloWorld.vue.