vue使用watch 觀察路由變化，重新獲取內容
更新時間：2017年03月08日 16:24:08 作者：Fayin
本篇文章主要介紹了vue使用watch 觀察路由變化，重新獲取內容 ，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
問題背景：
點擊用戶頭像 => 進入用戶個人中心，在用戶個人中心里點擊其他用戶的頭像，我希望顯示被點擊用戶的個人中心，但只看到了路由參數(shù)在發(fā)生變化，頁面內容并沒有更新。如圖：
頁面代碼如下：
<script>
export default {
data() {
return {
data: {}
}
},
methods: {
fetchDate() {
// 使用 axios獲取數(shù)據(jù)
......
},
created() {
this.fetchDate();
}
}
</script>
解決辦法：
使用 watch，觀察路由，一旦發(fā)生變化便重新獲取數(shù)據(jù)！
<script>
export default {
data() {
return {
data: {}
}
},
methods: {
fetchDate() {
// 使用 axios獲取數(shù)據(jù)
......
},
created() {
// 組件創(chuàng)建完后獲取數(shù)據(jù)，
// 此時 data 已經(jīng)被 observed 了
this.fetchDate();
},
watch: {
// 如果路由有變化，會再次執(zhí)行該方法
"$route": "fetchDate"
}
}
</script>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了VUE+element開發(fā)后臺管理的搜索功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue 界面刷新數(shù)據(jù)被清除 localStorage的使用詳解
今天小編就為大家分享一篇vue 界面刷新數(shù)據(jù)被清除 localStorage的使用詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue中 $emit的用法，通過實例代碼給大家介紹了子組件和父組件的相關知識，需要的朋友參考下吧2018-04-04
使用vue-router切換頁面時實現(xiàn)設置過渡動畫
今天小編就為大家分享一篇使用vue-router切換頁面時實現(xiàn)設置過渡動畫。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了vue頁面加載閃爍問題的解決方法,文中給大家提到了v-if 和 v-show 的區(qū)別，解決vue頁面加載時出現(xiàn){{message}}閃退的兩種方法，感興趣的朋友一起看看吧2018-03-03
這篇文章主要給大家介紹了關于element-ui表格如何自適應高度的相關資料,Element UI的Table組件默認情況下是沒有自適應高度的,文中給大家介紹了解決的辦法,需要的朋友可以參考下2023-08-08
vue2.0 實現(xiàn)導航守衛(wèi)（路由守衛(wèi)）
vue-route 提供的 beforeRouteUpdate 可以方便地實現(xiàn)導航守衛(wèi)（navigation-guards）。這篇文章主要介紹了vue2.0 實現(xiàn)導航守衛(wèi)（路由守衛(wèi)）的相關知識,需要的朋友可以參考下2018-05-05
這篇文章通過實例代碼給大家介紹了vue-父子組件傳值和ref獲取dom和組件的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
Vue3使用Element?Plus實現(xiàn)列表界面的方法步驟
寫后臺管理的時候會有很多列表以及相應的條件查詢,下面這篇文章主要給大家介紹了關于Vue3使用Element?Plus實現(xiàn)列表界面的方法步驟,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
vue3中使用keepAlive緩存路由組件不生效的問題解決
這篇文章主要介紹了vue3中使用keepAlive緩存路由組件不生效的問題解決,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-06-06