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。這時再返回到列表頁，頁面會從新刷新。