最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin2浏览0评论

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 badges
Add a comment  | 

1 Answer 1

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?

发布评论

评论列表(0)

  1. 暂无评论