Vue 實現前進刷新，後退不刷新的效果

更多文章

需求一：

在一個列表頁中，第一次進入的時候，請求獲取數據。

點擊某個列表項，跳到詳情頁，再從詳情頁後退回到列表頁時，不刷新。

也就是說從其餘頁面進到列表頁，須要刷新獲取數據，從詳情頁返回到列表頁時不要刷新。

解決方案

在 App.vue設置：

<keep-alive include="list">
            <router-view/>
        </keep-alive>
複製代碼

假設列表頁爲 list.vue，詳情頁爲 detail.vue，這兩個都是子組件。

咱們在 keep-alive 添加列表頁的名字，緩存列表頁。

而後在列表頁的 created 函數裏添加 ajax請求，這樣只有第一次進入到列表頁的時候纔會請求數據，當從列表頁跳到詳情頁，再從詳情頁回來的時候，列表頁就不會刷新。 這樣就能夠解決問題了。

需求二：

在需求一的基礎上，再加一個要求：能夠在詳情頁中刪除對應的列表項，這時返回到列表頁時須要刷新從新獲取數據。

咱們能夠在路由配置文件上對 detail.vue 增長一個 meta 屬性。

{
           path: '/detail',
           name: 'detail',
           component: () => import('../view/detail.vue'),
           meta: {isRefresh: true}
       },
複製代碼

這個 meta 屬性，能夠在詳情頁中經過 this.$route.meta.isRefresh 來讀取和設置。

設置完這個屬性，還要在 App.vue 文件裏設置 watch 一下 $route 屬性。

watch: {
       $route(to, from) {
           const fname = from.name
           const tname = to.name
           if (from.meta.isRefresh || (fname != 'detail' && tname == 'list')) {
               from.meta.isRefresh = false
   				// 在這裏從新請求數據
           }
       }
   },
複製代碼

這樣就不須要在列表頁的 created 函數裏用 ajax 來請求數據了，統一放在 App.vue 裏來處理。

觸發請求數據有兩個條件：

1. 從其餘頁面（除了詳情頁）進來列表時，須要請求數據。
2. 從詳情頁返回到列表頁時，若是詳情頁 meta 屬性中的 isRefresh 爲 true，也需求從新請求數據。

當咱們在詳情頁中刪除了對應的列表項時，就能夠將詳情頁 meta 屬性中的 isRefresh 設爲 true。這時再返回到列表頁，頁面會從新刷新。