解決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項目使用electron-builder庫打包成桌面程序的過程
這篇文章主要介紹了vue項目使用electron-builder庫打包成桌面程序的過程,本文給大家介紹如何使用electron-builder這個庫結合實例代碼給大家講解的非常詳細,感興趣的朋友一起看看吧2024-02-02Vue打包優(yōu)化之生產(chǎn)環(huán)境刪除console日志配置
這篇文章主要為大家介紹了Vue打包優(yōu)化之生產(chǎn)環(huán)境刪除console日志配置詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06vue+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