當我們在寫單頁應用的時候，前端路由采用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上帶上某個具體頁面的標識參數，這樣就可以控制某個具體頁面的緩存。這種設置非常的靈活，可以動態的控制頁面的緩存與否。

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