vue，vue-router實現瀏覽器返回不刷新頁面

當我們在寫單頁應用的時候，前端路由采用vue-router實現，如果從頁面A跳到頁面B，然后點瀏覽器返回，返回到頁面A時，頁面會刷新。最近遇到一個需求，一個列表頁，用戶會根據條件進行篩選，也可以翻頁，當用戶篩選后點擊具體的某一個條目時，進入詳情頁查看編輯詳情，用戶點擊返回時，希望之前頁面的篩選條件也能夠保留。查找相關資料，vue中有個keep-alive組件可以對組件進行緩存，這樣當頁面返回時就不會刷新頁面。

<keep-alive>
    <router-view></router-view>
</keep-alive>

但是直接keep-alive是強緩存，如果在詳情頁對於該內容做了修改，希望在列表頁的描述中能夠體現出來，這個時候希望可以動態的控制頁面的緩存與否，這個時候結合vue-router去實現，這時候需要對頁面的一些寫法進行改造，具體實現步驟：

1、頁面路由的寫法，其中$route.meta.keepAlive=true則頁面路由放置在keep-alive組件中，表示需要緩存，否則不緩存，這里就可以通過控制meta中的keepAlive屬性來控制router-view中的頁面需不需要緩存了。

<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

2、我們從列表頁A跳轉到詳情頁B時，可以在url是帶上特殊字段，A頁面在進行跳轉的時候在需要跳轉到的詳情頁url上加上過濾的數據，用來保存篩選條件。

//將篩選條件作為url的參數
let filterParams = {filterA: '', filterB: ''}
this.$router.push(path+'?backparams='+JSON.stringify(filterParams))

3、詳情頁中的相關配置，再由詳情頁跳轉走時，會首先執行beforeRouteLeave方法，在頁面上通過設置reload參數來控制跳轉到的頁面需不需要緩存。

//to表示將要跳轉頁面的url，在頁面中通過reload參數控制頁面跳轉到的頁面是否需要緩存
beforeRouteLeave (to, from, next){
    to.meta.keepAlive = true;
    if(this.reload){
	to.meta.keepAlive = false;
    }
    next();
}

4、列表頁中的判斷。如果頁面組件緩存后，不會執行vue對象中的beforeMount方法，如果沒有緩存我們也可以通過url上帶的過濾參數，在頁面加載前把過濾的數據賦值，從而實現頁面篩選條件保留而且頁面刷新跟新列表條目的數據。

let fromparams = '';
//vue對象中
beforeRouteEnter (to, from, next){
        if(from.query.backparams){
            fromparams = from.query.backparams;
        }
        next();
}
beforeMount (){
        if(fromparams.length>0){
            let params = JSON.parse(fromparams);
            //將url上帶回的參數賦值給vue中的data對象,從而實現條件的帶回
            this.date  = params.date;
            this.status = params.status
            this.page = params.page;
            ......
        }
}   　

如果多個列表對應一個詳情頁時，可以在url上帶上某個具體頁面的標識參數，這樣就可以控制某個具體頁面的緩存。這種設置非常的靈活，可以動態的控制頁面的緩存與否。

 

補充：

//頁面寫法1
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>　
//修改為寫法2
<router-view></router-view>

如果通過在url上帶參數的方法，可以直接去掉<keep-Alive>組件，因為寫法1有兩個router-view，當我們修改詳情頁B，然后跳到列表頁A，A頁面不緩存組件，且刷新了列表，但是兩個router-view導致keep-alive組件包裹的view頁面並沒有刷新還是老的狀態頁面，這時我們再點擊列表頁查看其它的詳情頁，再點返回時，這個時候列表頁用的是帶有keep-alive緩存的頁面，列表頁中之前我們改的詳情頁的狀態字段並沒有在緩存的列表頁刷新，顯示的還是老的狀態，所以我們就徹底廢棄掉vue提供的keep-Alive緩存組件，自己實現控制返回帶入之前篩選的條件，給用戶一種沒有刷新的體驗。

如果頁面只是，沒有寫的操作，那么可以直接用keep-alive寫法1來實現頁面緩存且不需要帶backparams參數。