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

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

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

本文知識(shí)點(diǎn)比較簡(jiǎn)單，主要面向vue新人解惑，vue前輩請(qǐng)忽略。

實(shí)現(xiàn)功能：

見上圖，這是一個(gè)產(chǎn)品列表，當(dāng)進(jìn)入不同列表時(shí)應(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、點(diǎn)擊不同類別，url有變化已正確指向不同的路由，但是內(nèi)容沒有更新

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

知識(shí)點(diǎn)

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

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

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

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

方法一：通過(guò) watch 監(jiān)聽路由（親測(cè)可行）

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

方法二：用 :key 來(lái)阻止“復(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ù)了

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

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

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

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

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

您可能感興趣的文章: