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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM