前言
今天在做一个简单的搜索业务的时候，前端通过vue的路由传值进行发送请求到后端，然后获取搜索结果。
但是发现了一个问题，那就是一开始参数传递过去的时候，可以进行搜索，但是在搜索页面进行再次搜索（也就是更改路由的参数变量的时候，不会得出搜索结果）。
原因是：当前的发送请求是在mounted这个函数中，只会在页面的首次加载执行，因此第一次传参进入搜索的时候能够正确向后端发起请求，但是请求过后，再次更改路由中的参数的时候就会导致无法再次向后端发起请求。
解决方案
为了解决这个问题，我使用路由参数的监听，通过监听路由传递过来的参数是否变化。
要是发生变化，就重新发起请求。
这里使用了watch对路由参数进行监听，同时immediate设置为true，使得第一次传递过来的搜索关键词也能被响应：
代码语言：javascript复制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()
代码语言：javascript复制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
}
}
})
