VUE 路由参数改变重新刷新数据

VUE 路由参数改变重新刷新数据

App.vue 里面使用路由，然后通过App.vue文件中的搜索功能搜索刷新路由文件中的列表。

修改 index.js 文件

首先在路由文件 index.js 文件中添加几行代码：

const VueRouterPush = Router.prototype.push
Router.prototype.push = function push (to) {
return VueRouterPush.call(this, to).catch(err => err)
}


这几行代码保证我们在当前路由页面下再次跳转到这个路由不会出错。

修改 App.vue 文件

添加点击查询按钮，进行页面跳转并搜索

this.$router.push({
name:'list',
query: {id:this.selectMsg }
})


在 list.vue 文件中使用 watch监听器

使用watch监听器监听路由参数变化。

// 监听器监听路由参数变化
watch:{
'$route':'getId'
},


上边的意思是当监听到 $route 对象变化后就监听到，调用getId方法。

下面是 getId 方法在下面：

// 监听路由参数变化
getId(){
this.getCarouselList(this.$route.query.id)
},


getCarouselList 是一个http请求方法。就是这样。