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请求方法。就是这样。

最后

以上就是老实柚子为你收集整理的VUE 路由参数改变重新刷新数据VUE 路由参数改变重新刷新数据的全部内容，希望文章能够帮你解决VUE 路由参数改变重新刷新数据VUE 路由参数改变重新刷新数据所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。