前言

今天在做一个简单的搜索业务的时候，前端通过vue的路由传值进行发送请求到后端，然后获取搜索结果。

但是发现了一个问题，那就是一开始参数传递过去的时候，可以进行搜索，但是在搜索页面进行再次搜索（也就是更改路由的参数变量的时候，不会得出搜索结果）。

原因是：当前的发送请求是在mounted这个函数中，只会在页面的首次加载执行，因此第一次传参进入搜索的时候能够正确向后端发起请求，但是请求过后，再次更改路由中的参数的时候就会导致无法再次向后端发起请求。

解决方案

为了解决这个问题，我使用路由参数的监听，通过监听路由传递过来的参数是否变化。

要是发生变化，就重新发起请求。

这里使用了watch对路由参数进行监听，同时immediate设置为true，使得第一次传递过来的搜索关键词也能被响应：

methods: {
        getPath() {
            this.keyword = this.$route.params.search
            let param = new URLSearchParams()
            param.append('keyword', this.keyword)
            axios({
                method: 'post',
                url: '/api/search',
                data: param
            }).then(res => {
                this.information = res.data.result
            })
        }
    },
    watch: {
        '$route': {
            handler(newName, oldName) {
                this.getPath()
            },
            immediate: true            //首次加载是否进行监听
        }
    }
}

关于vue中watch的使用方式

vue中的watch有两种使用方式

第一种是简单的，判断变化，然后调用方法的：

当每次监听到 fish9 值发生改变时，执行函数。也可以在所监听的数据后面直接加字符串形式的方法名doSome()

watch: {
    fish9: 'doSome'
}

第二种是通过使用immediate 和 handler，这样会更加地多样性

其中newName是指更改后新的参数，oldName是指更改前的参数，然后后面可以写自己的操作，也可以调用methods中的方法。

immediate 设置为 true是指，当参数首次传入的时候也会进行一次操作，默认为false

new Vue({
    el: '#root',
    data: {
        fish9: ''
    },
    watch: {
        fish9: {
            handler(newName, oldName) {
                // 这里可以写一些操作，或者使用methods中的方法　
            },
            immediate: true
        }
    } 
})