Vue js Laravel - Axios 在更改页面、类别和子类别时发出多个 (2) 请求

Question

我正在使用前端的Vue和后端的Laravel PHP构建一个应用程序。它是一个单页应用程序（SPA）。

更改页面时，有时 -并非总是- axios对同一页面发出两个请求。我很难弄清楚发生了什么。

当链接更改时，我有两个观察者，一个用于顶级类别，另一个用于子类别。它们触发调用 loadData 方法的 created() 钩子。

如果我更改主类别和子类别（例如：从 1/5 到 2/31），则将调用 loadData 方法两次。我该如何解决这个问题？

Google 网络选项卡（.json请求不代表我上面提到的相同类型的页面，只有数字）：

<script>

    import axios from 'axios'

    import { mapGetters } from 'vuex'

    import Form from 'vform'

    export default {

        data() {

            return {

                products: {

                    cat : {} , 

                    products : []

                },

                productsShow: '',

                quickSearchQuery: '',

                loadeddata : false,

            }

        },

        methods: {

            loadMore () {

                this.productsShow += 21

            },

            loadData () {

                if ( this.$route.params.sub_id ) {

                    axios.get('/api/cat/' + this.$route.params.cat_id + '/' + this.$route.params.sub_id).then(response => { 

                    this.products = response.data 

                    this.productsShow = 21

                    this.loadeddata = true

                    }).catch(error => {

                        if (error.response.status === 404) {

                            this.$router.push('/404');

                        }

                    });

                } else {

                    axios.get('/api/cat/' + this.$route.params.cat_id ).then(response => { 

                    this.products = response.data 

                    this.productsShow = 21

                    this.loadeddata = true

                    }).catch(error => {

                        if (error.response.status === 404) {

                            this.$router.push('/404');

                        }

                    });

             

Answer 1

已解决：watch: {&nbsp; &nbsp; '$route.params': function (cat_id, sub_id) {&nbsp; &nbsp; this.quickSearchQuery = ''&nbsp; &nbsp; this.loadData()},

Answer 2

已解决：watch: {&nbsp; &nbsp; '$route.params': function (cat_id, sub_id) {&nbsp; &nbsp; this.quickSearchQuery = ''&nbsp; &nbsp; this.loadData()},