解決vue更新路由router-view復(fù)用組件內(nèi)容不刷新的問題

更新時間：2019年11月04日 15:49:31 作者：最文藝的程序員

今天小編就為大家分享一篇解決vue更新路由router-view復(fù)用組件內(nèi)容不刷新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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

實現(xiàn)功能：

見上圖，這是一個產(chǎn)品列表，當(dāng)進(jìn)入不同列表時應(yīng)該更新內(nèi)容。

代碼如下：

//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有變化已正確指向不同的路由，但是內(nèi)容沒有更新

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

知識點

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

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

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

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

方法一：通過 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 來阻止“復(fù)用”

具體使用方法：

<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) {
 // 在渲染該組件的對應(yīng)路由被 confirm 前調(diào)用
 // 不！能！獲取組件實例 `this`
 // 因為當(dāng)鉤子執(zhí)行前，組件實例還沒被創(chuàng)建
},
beforeRouteUpdate (to, from, next) {
 // 在當(dāng)前路由改變，但是該組件被復(fù)用時調(diào)用
 // 舉例來說，對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候，
 // 由于會渲染同樣的 Foo 組件，因此組件實例會被復(fù)用。而這個鉤子就會在這個情況下被調(diào)用。
 // 可以訪問組件實例 `this`
},
beforeRouteLeave (to, from, next) {
 // 導(dǎo)航離開該組件的對應(yīng)路由時調(diào)用
 // 可以訪問組件實例 `this`
}

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

以上內(nèi)容如果有錯誤，請各位朋友指出，謝謝。

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

您可能感興趣的文章: