vue-router watch 監聽路由引數改變觸發函式

豬豬是天才發表於2018-06-11

背景: vue專案 連續點選側邊欄進入同一個路由,頁面沒有變化,沒有重新載入mounted方法

解決方法:在路由後面加相應的引數,在頁面中通過監聽路由後的params改變而改變dom

話不多說,上程式碼...

點選button 進入相同頁面 可以這樣寫 動態加params :

this.$router.push({'name': 'report', query: {'param1': xxx, 'param2':xxx}})
複製程式碼

這樣點選按鈕的時候,路由是賊個樣子滴~

http://127.0.0.1:8081/#/report_deg?_case=A&_control=B
複製程式碼

在頁面中監聽路由引數改變觸發的函式,賊樣寫撒~

watch: {
    '$route': 'getTabelValueReset'    // getTabelValueReset 是路由改變後觸發的函式名稱
  },
複製程式碼

這樣就可以改變頁面效果了~

鼓掌 ? 點贊 ?

ps:

一:如果是用 link to 的方式加引數,寫法如下:

router-link 修改為 :to="{ name:'game1', params: {num: 123} }"  
複製程式碼

二:如果只是想拿到路由中的引數,怎麼做?如下:

this.$route.params.year
this.$route.query.id複製程式碼

OK~大功告成!歡迎補充~


相關文章