laravel - How to fix the flickering of GET parameters in the address bar? - Stack Overflow

admin管理员组

文章数量:1316414

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:

• laravel
• vue.js
• inertiajs
• laravel-11

Share Improve this question Follow edited Jan 30 at 6:14 DarkBee 15.6k88 gold badges7272 silver badges117117 bronze badges asked Jan 30 at 6:03 MaksimMaksim 1144 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

It 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?

本文标签： laravelHow to fix the flickering of GET parameters in the address barStack Overflow