Javascript 如何更改vuejs 2路由器查询+；拉威尔5.2

第一个原因是我的英语不好。（我是新手：D） 当我使用vue获取ajax数据并更改一些过滤器（如页面）时，我遇到了一个问题。排序和。。。在我的url查询（params）中，将其发送到服务器并获取新数据。如果用户复制url并将其粘贴到另一个浏览器中以显示相同的数据，则还可以更新url。 所以我在网上多次搜索后使用了这种方式。
我想知道我的解决方案是否合适（是否标准？）？还是这是个坏主意？ 我的看法是：

<div id="app" class="row" v-cloak>
        <div class="col-md-3">
            <div class="filters">
                <div class="categories">
                    <ul>
                        <li class="filter-category" v-for="category in categories" v-on:click="changeFilterByCat(category.id)">
                            <router-link :to="{ name: 'filter', query: { query }}">@{{ category.title }}</router-link>
                        </li>
                    </ul>
                </div>
                <div class="teachers">
                    <ul>
                        <li class="filter-teacher" v-for="teacher in teachers" v-on:click="changeFilterByTeacher(teacher.id)">
                            <router-link :to="{ name: 'filter', query: { query }}">@{{ teacher.name }}</router-link>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

const router = new VueRouter({
    routes: [
        { path: "/", name: 'filter'}
    ]
});

var app = new Vue({
    router,
    el: '#app',
    data: {
        baseUrl: '{{ route("MY-URL",cat-name)}}',
        products: '',
        categories: '',
        teachers: '',
        query: {
            page: 1,
            take: 2,
            ct: '',
            tcr: '',
            srt: 'adc'
        }
    },
    mounted: function () {
        this.setUrlParams();
        this.getData();
    },
    methods: {
        setUrlParams(){
            if(this.$route.query.page){
                this.query = this.$route.query;
            }
            router.push({ name: 'filter', query: this.query});
        },
        getData(){
            console.log(this.baseUrl+this.$route.fullPath);
            this.$http.get(this.baseUrl+this.$route.fullPath)
                .then(function (response) {
                    this.products = response.body.products;
                    this.categories = response.body.categories;
                    this.teachers = response.body.teachers;
                });
        },
        changeFilterByCat(catID){
            this.query.ct = catID;
            router.push({ name: 'filter', query: this.query});
        },
        changeFilterByTeacher(teacherId){
            this.query.tcr = teacherId;
            router.push({ name: 'filter', query: this.query});
        }
    }
});