Vue跳轉同一界面多次,使用不同數據進行渲染


這是經常遇到的一個問題,之前沒有注意,有一天進行code Review提了出來。

舉個栗子:網上商城想要看商品的詳情,就需要通過列表頁點擊,進入詳情頁。詳情頁的數據處理是通過傳過來的商品Id獲取信息進行綁定渲染。

如果不進行處理,多次打開詳情頁就會出現問題。

1、如果是在詳情頁的data中直接進行Id獲取,

 

  然后在create中進行數據獲取,那么在不關詳情頁並多次打開詳情頁的時候,之后打開的詳情頁數據都是和第一頁相同的,這是因為data是在$vm實例創建之前就會進行賦值,

  而在第一次打開頁面時,就已經創建了實例並對data進行賦值了,之后每次打開都不會再創建;

2、在create中獲取傳過來的Id,然后調用方法獲取數據,這種情況其實和1、原理是差不多的;

3、使用activated(這是和keep-alive協同使用的一個屬性,如果沒有設置keep-alive ,activated是不存在的),並在activated中進行Id獲取和數據方法調用。

  activated和created什么區別呢?created是創建vm實例時執行,而activated更像是每次新打開這個頁面的時候執行。但是這時候還是有問題,那就是在 每次新打開了詳情頁,

  而返回舊的詳情頁時,數據也變成了新打開頁面的數據,這是為什么呢,其實就是因為activated是新打開頁面時執行。新打開!新打開!新打開!

4、使用watch監聽,監聽路由!對就是監聽路由,當監聽到路由轉到詳情頁時,就獲取Id並調用數據方法。以下代碼GetData()方法中獲取Id並獲取數據。監聽路由和設置activated是互補的操作,新打開頁面時,

  路由不會被監聽,這時候利用activated,但是在重復打開本頁面時,activated不會被執行,這時候利用路由監聽。

  

watch:{
    "$route"(val,oldval){
                if(val.meta.title=='詳情頁名字'){
                       this.GetData()
                 }
         }
}
                                                                    

 

 

 

 

以上純屬個人理解,如果 解釋有誤,歡迎留言指正!只希望能共同進步。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM