欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決vue更新路由router-view復用組件內容不刷新的問題

 更新時間:2019年11月04日 15:49:31   作者:最文藝的程序員  
今天小編就為大家分享一篇解決vue更新路由router-view復用組件內容不刷新的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

本文知識點比較簡單,主要面向vue新人解惑,vue前輩請忽略。

實現(xiàn)功能:

見上圖,這是一個產(chǎn)品列表,當進入不同列表時應該更新內容。

代碼如下:

//router配置

{
  path: "/products/:category",
  name: "Products",
  components: {
  ...
  }
 }

//組件js配置

mounted() {
  this.getData(this.$route.params.category);
 },
 methods: {
  getData: function(category){
   this.axios.get("/products/" + category).then(res => {
 
    const data = res.data.data;
    this.pros = data.pro;
   }).catch(error => {
    console.log("error init." + error);
   });
  }
 }

目前癥狀:

1、點擊不同類別,url有變化已正確指向不同的路由,但是內容沒有更新

2、由當前類別進入其他類別路由后刷新頁面,可正確獲取數(shù)據(jù)

知識點

在使用Vue-router做項目時,會遇到如/serviceId/:id這樣只改變id號的場景。由于router-view是復用的,單純的改變id號并不會刷新router-view

watch 除了可以監(jiān)聽數(shù)據(jù)的變化,路由的變化也能被其監(jiān)聽到

:key vue 為你提供了一種方式來聲明“這兩個元素是完全獨立的——不要復用它們”。只需添加一個具有唯一值的 key 屬性即可

針對以上,經(jīng)過本人項目實踐以及網(wǎng)友貢獻,有三種方法可解決:

方法一:通過 watch 監(jiān)聽路由(親測可行)

mounted() {
 this.getData(this.$route.params.category);
},
methods: {
 getData: function(category){
 ...
 }
},
watch: { //通過watch來監(jiān)聽路由變化
 "$route": function(){
 this.getData(this.$route.params.category);
 }
}

方法二:用 :key 來阻止“復用”

具體使用方法:

<router-view :key="key"></router-view>
 
computed: {
 key() {
 return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()
 }
}

tips:使用computed屬性和Date()可以保證每一次的key都是不同的,這樣就可以如愿刷新數(shù)據(jù)了

方法三:通過 vue-router 的鉤子函數(shù) beforeRouteEnter beforeRouteUpdate beforeRouteLeave

computed:mapGetters([
 ...
]),
beforeRouteEnter (to, from, next) {
 // 在渲染該組件的對應路由被 confirm 前調用
 // 不!能!獲取組件實例 `this`
 // 因為當鉤子執(zhí)行前,組件實例還沒被創(chuàng)建
},
beforeRouteUpdate (to, from, next) {
 // 在當前路由改變,但是該組件被復用時調用
 // 舉例來說,對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id,在 /foo/1 和 /foo/2 之間跳轉的時候,
 // 由于會渲染同樣的 Foo 組件,因此組件實例會被復用。而這個鉤子就會在這個情況下被調用。
 // 可以訪問組件實例 `this`
},
beforeRouteLeave (to, from, next) {
 // 導航離開該組件的對應路由時調用
 // 可以訪問組件實例 `this`
}

本人嘗試使用"beforeRouteUpdate",但位得到解決,其他方法沒有嘗試。

以上內容如果有錯誤,請各位朋友指出,謝謝。

這篇解決vue更新路由router-view復用組件內容不刷新的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

  • Vue前端導出Excel文件的詳細實現(xiàn)方案

    Vue前端導出Excel文件的詳細實現(xiàn)方案

    在開發(fā)后臺管理系統(tǒng)的時候,很多地方都要用到導出excel表格,比如將table中的數(shù)據(jù)導出到本地,下面這篇文章主要給大家介紹了關于Vue導出Excel文件的相關資料,需要的朋友可以參考下
    2021-09-09
  • vue中的事件修飾符介紹和示例

    vue中的事件修飾符介紹和示例

    在Vue中,修飾符處理了許多DOM事件的細節(jié),讓我們不再需要花大量的時間去處理這些煩惱的事情,而能有更多的精力專注于程序的邏輯處理,需要的朋友可以參考下
    2023-04-04
  • vue項目使用electron-builder庫打包成桌面程序的過程

    vue項目使用electron-builder庫打包成桌面程序的過程

    這篇文章主要介紹了vue項目使用electron-builder庫打包成桌面程序的過程,本文給大家介紹如何使用electron-builder這個庫結合實例代碼給大家講解的非常詳細,感興趣的朋友一起看看吧
    2024-02-02
  • Vue打包優(yōu)化之生產(chǎn)環(huán)境刪除console日志配置

    Vue打包優(yōu)化之生產(chǎn)環(huán)境刪除console日志配置

    這篇文章主要為大家介紹了Vue打包優(yōu)化之生產(chǎn)環(huán)境刪除console日志配置詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-06-06
  • Vue仿支付寶支付功能

    Vue仿支付寶支付功能

    這篇文章主要介紹了Vue仿支付寶支付功能,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-05-05
  • 淺談VUE監(jiān)聽窗口變化事件的問題

    淺談VUE監(jiān)聽窗口變化事件的問題

    下面小編就為大家分享一篇淺談VUE監(jiān)聽窗口變化事件的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02
  • vue+openlayers+nodejs+postgis實現(xiàn)軌跡運動效果

    vue+openlayers+nodejs+postgis實現(xiàn)軌跡運動效果

    使用postgres(postgis)數(shù)據(jù)庫以及nodejs作為后臺,vue和openlayers做前端,openlayers使用http請求通過nodejs從postgres數(shù)據(jù)庫獲取數(shù)據(jù),這篇文章主要介紹了vue+openlayers+nodejs+postgis實現(xiàn)軌跡運動,需要的朋友可以參考下
    2024-05-05
  • vue實現(xiàn)多條件篩選超簡潔代碼

    vue實現(xiàn)多條件篩選超簡潔代碼

    這篇文章主要給大家介紹了關于vue實現(xiàn)多條件篩選的相關資料,隨著數(shù)據(jù)的不斷增多,我們往往需要在表格中進行多條件的篩選,以便快速定位符合我們需求的數(shù)據(jù),需要的朋友可以參考下
    2023-09-09
  • vue實現(xiàn)虛擬滾動的示例詳解

    vue實現(xiàn)虛擬滾動的示例詳解

    虛擬滾動或者移動是指禁止原生滾動,之后通過監(jiān)聽瀏覽器的相關事件實現(xiàn)模擬滾動,下面小編就來和大家詳細介紹一下vue實現(xiàn)虛擬滾動的示例代碼,需要的可以參考下
    2023-10-10
  • 基于element-ui自定義封裝大文件上傳組件的案例分享

    基于element-ui自定義封裝大文件上傳組件的案例分享

    本文主要介紹了以element-ui基礎封裝大文件上傳的組件,包括斷點續(xù)傳,秒傳,上傳進度條,封裝思想邏輯來源于el-upload 組件源碼,文中有具體案例分享,需要的朋友可以參考下
    2024-01-01

最新評論