Deeply nested objects in query are considered equal when they are not really equal

[awei01]

Version

2.5.3

Reproduction link

https://jsfiddle.net/awei01/5v9nqe7o/

Steps to reproduce

Open the JS fiddle.
Open console logger
Click the link, notice that the query is updated and console logs "route completed"
Click link again. Notice the query is not updated and console logs "route aborted"

What is expected?

The route should change because the query object has changed.

What is actually happening?

The route inspector should see that these objects are not equal. The implementation of "isEqualObject" doesn't take into account deeply nested objects.

see these lines:

vue-router/src/util/route.js

Lines 76 to 83 in 2f97b19

	function isObjectEqual (a = {}, b = {}): boolean {
	const aKeys = Object.keys(a)
	const bKeys = Object.keys(b)
	if (aKeys.length !== bKeys.length) {
	return false
	}
	return aKeys.every(key => String(a[key]) === String(b[key]))
	}

---

I'm using my own custom implementation of parseQuery and stringifyQuery for the Router object so, I'd like to be able to allow the route to continue. Specifically I'm using 'urlon' npm package which can handle nested objects in the querystring.

[posva]

I'm using my own custom implementation of parseQuery and stringifyQuery for the Router object so, I'd like to be able to allow the route to continue. Specifically I'm using 'urlon' npm package which can handle nested objects in the querystring.

That's interesting, did you patch the code or actually implemented a way of using any library like qs?

For the moment, nested queries are not supported (the url will look something like [object Object] but escaped), but this is indeed something that must be improved once we support other implementations of those functions. I'll give it a look tomorrow 🙂

edit: Somehow I missed that we already support that. I feel so dumb 😓

[awei01]

@posva No worries. Yes, I did use the recently added parseQuery and stringifyQuery configuration keys.