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: {

    '$route.params': function (cat_id, sub_id) {

    this.quickSearchQuery = ''

    this.loadData()

},

Answer 2

已解决：

watch: {

    '$route.params': function (cat_id, sub_id) {

    this.quickSearchQuery = ''

    this.loadData()

},