溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文知識點比較簡單，主要面向vue新人解惑，vue前輩請忽略。
實現功能：
見上圖，這是一個產品列表，當進入不同列表時應該更新內容。
代碼如下：
//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、由當前類別進入其他類別路由后刷新頁面，可正確獲取數據
知識點
在使用Vue-router做項目時，會遇到如/serviceId/:id這樣只改變id號的場景。由于router-view是復用的，單純的改變id號并不會刷新router-view
watch 除了可以監聽數據的變化，路由的變化也能被其監聽到
:key vue 為你提供了一種方式來聲明“這兩個元素是完全獨立的——不要復用它們”。只需添加一個具有唯一值的 key 屬性即可
針對以上，經過本人項目實踐以及網友貢獻，有三種方法可解決：
方法一：通過 watch 監聽路由（親測可行）
mounted() {
this.getData(this.$route.params.category);
},
methods: {
getData: function(category){
...
}
},
watch: { //通過watch來監聽路由變化
"$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都是不同的，這樣就可以如愿刷新數據了
方法三：通過 vue-router 的鉤子函數 beforeRouteEnter beforeRouteUpdate beforeRouteLeave
computed:mapGetters([
...
]),
beforeRouteEnter (to, from, next) {
// 在渲染該組件的對應路由被 confirm 前調用
// 不！能！獲取組件實例 `this`
// 因為當鉤子執行前，組件實例還沒被創建
},
beforeRouteUpdate (to, from, next) {
// 在當前路由改變，但是該組件被復用時調用
// 舉例來說，對于一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
// 由于會渲染同樣的 Foo 組件，因此組件實例會被復用。而這個鉤子就會在這個情況下被調用。
// 可以訪問組件實例 `this`
},
beforeRouteLeave (to, from, next) {
// 導航離開該組件的對應路由時調用
// 可以訪問組件實例 `this`
}
本人嘗試使用"beforeRouteUpdate"，但位得到解決，其他方法沒有嘗試。
以上內容如果有錯誤，請各位朋友指出，謝謝。
這篇解決vue更新路由router-view復用組件內容不刷新的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
