vue使用watch 觀察路由變化，重新獲取內(nèi)容

更新時(shí)間：2017年03月08日 16:24:08 作者：Fayin

本篇文章主要介紹了vue使用watch 觀察路由變化，重新獲取內(nèi)容，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。

問題背景：

點(diǎn)擊用戶頭像 => 進(jìn)入用戶個(gè)人中心，在用戶個(gè)人中心里點(diǎn)擊其他用戶的頭像，我希望顯示被點(diǎn)擊用戶的個(gè)人中心，但只看到了路由參數(shù)在發(fā)生變化，頁面內(nèi)容并沒有更新。如圖：

頁面代碼如下：

<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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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