Vue监听路由中传参的变化

您所在的位置：网站首页 › vue计算属性如何传参 › Vue监听路由中传参的变化

Vue监听路由中传参的变化

2023-04-25 20:25| 来源: 网络整理| 查看: 265

前言

今天在做一个简单的搜索业务的时候，前端通过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 } } })

【本文地址】

Vue监听路由中传参的变化

Vue监听路由中传参的变化

今日新闻

推荐新闻