vue / nuxt路由query参数变化,但是页面不刷新
在做搜索功能的时候,顶部是一个组件,当顶部组件传值给搜索页:tosearch() {this.search = $('#search').val()console.log(this.search)this.$router.push({path: '/search',query: {search: this.search,},})},但是如果在搜索页
·
在vue里面:在做搜索功能的时候,顶部是一个组件,当顶部组件传值给搜索页:
tosearch() {
this.search = $('#search').val()
console.log(this.search)
this.$router.push({
path: '/search',
query: {
search: this.search,
},
})
},
但是如果在搜索页面输入想要找的值,页面不刷新,这个时候可以 利用组件内守卫 beforeRouteUpdate
方法来触发请求方法
beforeRouteUpdate(to, from, next) {
console.log(to.query.search)
this.getData(to.query.search)
next()
},
created() {
this.getData()
},
methods:{
getData(search) {
if (search) {
this.search = search
} else {
this.search = this.$route.query.search
}
console.log('search:', this.search)
},
//下面是axios调用接口
}
在Nuxt里面:
https://zh.nuxtjs.org/docs/2.x/components-glossary/pages-watchquery/文档里有介绍
watchQuery
键可以设置查询字符串的监视程序。如果定义的字符串发生更改,则将调用所有组件方法(asyncData,fetch(context),validate,layout等)。监视默认情况下处于禁用状态,以提高性能。
如果要为所有查询字符串设置监视程序,请设置watchQuery: true
。
watchQuery: ['search'],注意里面的search是query里的属性名
watchQuery: true,
watchQuery: ['search'],
async asyncData({ $axios, query }) {
let search = query.search
},
更多推荐
已为社区贡献5条内容
所有评论(0)