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中定義全局聲明vscode插件提示找不到問(wèn)題解決
這篇文章主要為大家介紹了vue中定義全局聲明vscode插件提示找不到問(wèn)題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了Vue3組件的開(kāi)發(fā)，上一篇文章我們價(jià)紹了Vue3（三）網(wǎng)站首頁(yè)布局開(kāi)發(fā)，今天繼續(xù)上篇內(nèi)容展開(kāi)組件的開(kāi)發(fā),需要的朋友可以參考一下2021-11-11
element?el-upload文件上傳覆蓋第一個(gè)文件的實(shí)現(xiàn)
這篇文章主要介紹了element?el-upload文件上傳覆蓋第一個(gè)文件的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
ElementPlus?Table表格實(shí)現(xiàn)可編輯單元格
本文主要介紹了ElementPlus?Table表格實(shí)現(xiàn)可編輯單元格,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-12-12
在vue中nextTick用法及nextTick 的原理是什么
這篇文章主要介紹了在vue中nextTick用法及nextTick 的原理是什么,Vue.js 是一個(gè)流行的前端框架，它提供了一種響應(yīng)式的數(shù)據(jù)綁定機(jī)制，使得頁(yè)面的數(shù)據(jù)與頁(yè)面的 UI 組件之間能夠自動(dòng)同步，需要的朋友可以參考下2023-04-04
文章展示了基于Vue封裝的標(biāo)準(zhǔn)漏斗圖的代碼,包括權(quán)重算法、滾輪監(jiān)聽(tīng)和點(diǎn)擊示例功能,旨在提供實(shí)用的圖表展示技巧2025-02-02
Vue過(guò)渡效果之CSS過(guò)渡詳解(結(jié)合transition,animation,animate.css)
Vue 在插入、更新或者移除 DOM 時(shí)，提供多種不同方式的應(yīng)用過(guò)渡效果。本文將從CSS過(guò)渡transition、CSS動(dòng)畫(huà)animation及配合使用第三方CSS動(dòng)畫(huà)庫(kù)(如animate.css)這三方面來(lái)詳細(xì)介紹Vue過(guò)渡效果之CSS過(guò)渡2020-02-02
vue項(xiàng)目中使用ueditor的實(shí)例講解
下面小編就為大家分享一篇vue項(xiàng)目中使用ueditor的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
UNIapp實(shí)現(xiàn)局域網(wǎng)內(nèi)在線升級(jí)的操作方法
這篇文章主要介紹了UNIapp實(shí)現(xiàn)局域網(wǎng)內(nèi)在線升級(jí)的操作方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
Vue實(shí)現(xiàn)active點(diǎn)擊切換方法
下面小編就為大家分享一篇Vue實(shí)現(xiàn)active點(diǎn)擊切換方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03