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