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

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

創(chuàng)新互聯(lián)基于分布式IDC數(shù)據(jù)中心構(gòu)建的平臺(tái)為眾多戶提供四川服務(wù)器托管 四川大帶寬租用 成都機(jī)柜租用 成都服務(wù)器租用。

實(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 為你提供了一種方式來聲明“這兩個(gè)元素是完全獨(dú)立的——不要復(fù)用它們”。只需添加一個(gè)具有唯一值的 key 屬性即可

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

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

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) {
 // 在渲染該組件的對(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)用
 // 舉例來說，對(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è)參考，也希望大家多多支持創(chuàng)新互聯(lián)。

文章標(biāo)題：解決vue更新路由router-view復(fù)用組件內(nèi)容不刷新的問題
路徑分享：http://muchs.cn/article26/johhjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、面包屑導(dǎo)航、建站公司、、域名注冊(cè)、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)