Flickering of parameters in the address bar (Laravel Jetstream + Vue)
When I generate a URL like this:
http://localhost/admin/users/list?page=2&field=name&direction=asc
and navigate to it, I see a flicker in the address bar, and the parameters switch places:
http://localhost/admin/users/list?direction=asc&field=name&page=2
Controller
:
public function list() {
return Inertia::render('Admin/Users/List', [
'users' => User::orderBy(request('sort', 'id'), request('direction', 'asc'))
->paginate(10)->withQueryString(),
'direction' => request('direction'),
'sort' => request('sort'),
]);
}
list.vue
:
router.get(route('admin.users.list'), {
direction: direction.value,
page: 1,
sort: sort.value,
});
pagination.vue
:href="pagination.prev_page_url"
This results in URLs like:
http://localhost/admin/users/list?direction=asc&page=5&sort=name
Check if the address I came from differs from the one displayed in the browser:
Flickering of parameters in the address bar (Laravel Jetstream + Vue)
When I generate a URL like this:
http://localhost/admin/users/list?page=2&field=name&direction=asc
and navigate to it, I see a flicker in the address bar, and the parameters switch places:
http://localhost/admin/users/list?direction=asc&field=name&page=2
Controller
:
public function list() {
return Inertia::render('Admin/Users/List', [
'users' => User::orderBy(request('sort', 'id'), request('direction', 'asc'))
->paginate(10)->withQueryString(),
'direction' => request('direction'),
'sort' => request('sort'),
]);
}
list.vue
:
router.get(route('admin.users.list'), {
direction: direction.value,
page: 1,
sort: sort.value,
});
pagination.vue
:href="pagination.prev_page_url"
This results in URLs like:
http://localhost/admin/users/list?direction=asc&page=5&sort=name
Check if the address I came from differs from the one displayed in the browser:
Share Improve this question edited Jan 30 at 6:14 DarkBee 15.6k8 gold badges72 silver badges117 bronze badges asked Jan 30 at 6:03 MaksimMaksim 114 bronze badges1 Answer
Reset to default 0It appears to be a known issue which might someday be solved. A pull request was made but has yet to be merged.
Googling for vue url query parameter alphabetical order
led me to the issue Query parameters are rearranging on page load #3578 that seems to describe exactly what you are seeing too.
That issue was Closed as a duplicate of Why is it designed as below? it will cause history.replaceState method to be called #3447 which mentions a replaceState
function in the Vue framework that perhaps should not be called.
That issue is still Open and is linked to a pull request feat: optimize method to determine whether the two path are the same in ensureUrl methods #3477 that might fix the issue. From a quick glance I think it has to do something with comparing the list of query parameters to decide whether or not they contain the same keys.
It appears the last activity on these issues was in 2021 so it might not be solved anytime soon.
To solve this flicker, maybe you could order the parameters alphabetically yourself?