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請求方法。就是這樣。